从构造函数到继承：一文读懂JS原型与继承

2023-12-15 22:46:25

JS中的原型和继承是理解对象创建和属性方法传递的关键，它们也是构建复杂应用程序的基础。本文将深入剖析这些概念，从构造函数到ES6的class，全面解析JS中的继承机制。

1. 构造函数和原型

在JavaScript中，构造函数是一个用来创建对象的函数，它通常以大写字母开头，比如Person()。构造函数通过new操作符来调用，从而创建一个新的对象。例如：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person1 = new Person('John', 30);
console.log(person1.name); // 'John'
console.log(person1.age); // 30

在上面的例子中，Person()是一个构造函数，它接受两个参数name和age，并使用this将它们分配给新创建的对象person1。this关键字指向正在创建的对象，因此它允许我们在构造函数内部访问和修改对象属性。

每个构造函数都有一个prototype属性，它指向一个对象，这个对象包含了构造函数创建的所有对象的共享属性和方法。例如：

console.log(Person.prototype); // {constructor: ƒ}

Person.prototype对象包含一个名为constructor的属性，它指向Person()构造函数。这表示Person()构造函数创建的所有对象都继承了Person.prototype对象中的属性和方法。

2. 原型继承

在JavaScript中，对象可以通过原型继承来共享属性和方法。当一个对象被创建时，它会自动继承其构造函数的原型对象中的属性和方法。例如：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const person1 = new Person('John', 30);
person1.greet(); // 'Hello, my name is John and I am 30 years old.'

在上面的例子中，我们为Person()构造函数添加了一个名为greet()的方法。这个方法被添加到Person.prototype对象中，因此Person()构造函数创建的所有对象都可以访问和使用这个方法。

3. ES6中的class

ES6中引入了class关键字，它提供了一种更简洁、更现代的方式来定义构造函数和原型继承。例如：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const person1 = new Person('John', 30);
person1.greet(); // 'Hello, my name is John and I am 30 years old.'

在上面的例子中，我们使用class关键字定义了一个名为Person的类。类中的constructor()方法是构造函数，它接受两个参数name和age，并使用this关键字将它们分配给新创建的对象。类中的greet()方法是一个实例方法，它被添加到Person类的原型对象中，因此Person类创建的所有对象都可以访问和使用这个方法。