剖析 JS 继承的精髓，揭开面向对象编程的奥秘

2023-11-19 13:09:21

在计算机科学领域，继承的概念源远流长，它是一种强大的编程范式，能够让子类从父类中获取属性和方法。这种机制的精髓在于，子类可以复用父类的功能，从而简化代码结构，提高开发效率。在 JavaScript 中，继承机制同样扮演着举足轻重的角色，它为面向对象编程提供了坚实的基础。

原型继承：继承的基石

JavaScript 中的继承机制主要基于原型继承，它是一种通过原型链实现继承的方式。每个对象都有一个原型对象，原型对象又指向另一个原型对象，如此层层追溯，最终指向 Object.prototype 对象。

子类通过原型链继承父类的方法和属性，当子类实例调用一个方法时，JavaScript 引擎会沿着原型链查找该方法，直到找到它为止。如果在子类实例中找不到该方法，那么 JavaScript 引擎就会在子类的原型对象中查找，以此类推。

function Parent() {
  this.name = 'John';
}

Parent.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

function Child() {
  this.age = 20;
}

Child.prototype = new Parent();

const child = new Child();
child.sayHello(); // Hello, my name is John

在这个例子中，Child 类通过原型链继承了 Parent 类的 sayHello() 方法。当我们调用 child.sayHello() 时，JavaScript 引擎会沿着原型链查找 sayHello() 方法，直到在 Parent.prototype 对象中找到它，然后执行该方法。

构造函数继承：一种替代方式

除了原型继承之外，JavaScript 中还存在另一种继承方式，即构造函数继承。构造函数继承通过在子类的构造函数中调用父类的构造函数来实现继承。

function Parent() {
  this.name = 'John';
}

Parent.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

function Child() {
  Parent.call(this);
  this.age = 20;
}

const child = new Child();
child.sayHello(); // Hello, my name is John

在这个例子中，Child 类的构造函数通过调用 Parent 类的构造函数来继承 Parent 类的属性和方法。当我们调用 new Child() 时，首先会执行 Parent 类的构造函数，然后执行 Child 类的构造函数。

组合继承：融合二者的优点

原型继承和构造函数继承各有优缺点，原型继承简单易懂，但存在一些局限性，例如无法向父类传递参数。构造函数继承可以解决这些局限性，但它也存在一些问题，例如子类实例不能访问父类实例的私有属性和方法。

为了兼顾原型继承和构造函数继承的优点，人们提出了组合继承，它将原型继承和构造函数继承结合起来，从而形成了一种更加灵活的继承方式。

function Parent() {
  this.name = 'John';
}

Parent.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

function Child() {
  Parent.call(this);
  this.age = 20;
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

const child = new Child();
child.sayHello(); // Hello, my name is John

在这个例子中，Child 类通过构造函数继承的方式继承了 Parent 类的属性和方法，然后通过 Object.create() 方法将 Parent.prototype 作为 Child.prototype 的原型对象，从而实现了原型继承。这样，子类实例就可以访问父类实例的私有属性和方法。

寄生组合继承：更进一步的优化

寄生组合继承是在组合继承的基础上进行进一步的优化，它通过创建一个临时构造函数来实现继承。

function Parent() {
  this.name = 'John';
}

Parent.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

function Child() {
  const temp = new Parent();
  temp.constructor = Child;
  return temp;
}

const child = new Child();
child.sayHello(); // Hello, my name is John

在这个例子中，Child 类通过创建一个临时构造函数 temp 来实现继承，然后将 Child.prototype 赋值给 temp.constructor，这样，temp 实例就成为了 Child 类的实例。最后，返回 temp 实例。

ES6 继承：面向类的继承

在 ES6 中，引入了 class ，使得 JavaScript 拥有了面向类的继承机制。ES6 的继承机制与前面提到的继承机制类似，但它更加简洁、直观。

class Parent {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log('Hello, my name is ' + this.name);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
}

const child = new Child('John', 20);
child.sayHello(); // Hello, my name is John