JS继承实现方式全解析

JS继承是实现代码复用和扩展的关键技术，本文深入详解JavaScript中各种继承方式，包括原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承以及**寄生组合式继承**。其中，**寄生组合式继承**被认为是最佳实践，它有效避免了组合继承中父类构造函数被多次调用的问题，提升了性能。同时，文章还介绍了ES6中`class`和`extends`关键字，它们本质上是**寄生组合式继承**的语法糖，简化了继承的实现。此外，本文还深入剖析了原型链的概念，帮助开发者理解JS继承的底层机制，选择最适合的继承方案，提升代码质量和可维护性。

JS继承的核心是通过原型链实现对象间属性和方法的传递与共享，最有效的实现方式是寄生组合式继承，它解决了组合继承中父类构造函数被调用两次的问题，且支持属性隔离和方法复用，ES6的class和extends语法本质上是寄生组合式继承的语法糖，原型链则是对象属性查找的路径机制，从实例向上逐级查找直至null结束。

JS继承本质上是对象之间属性和方法的传递和共享，核心在于如何建立和维护对象间的原型链关系。

解决方案

JavaScript实现继承的方式有很多，各有优缺点。最常用的包括原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承和寄生组合式继承。

原型链继承

原型链继承的核心思想是让子类型的原型对象指向父类型的一个实例。这样，子类型就可以访问父类型原型对象上的属性和方法。

function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.sayName = function() {
  console.log(this.name);
};

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

Child.prototype = new Parent('Parent'); // 关键：子类型的原型指向父类型的实例
Child.prototype.constructor = Child; // 修正constructor指向

Child.prototype.sayAge = function() {
  console.log(this.age);
};

let child1 = new Child(20);
child1.sayName(); // Parent
child1.sayAge(); // 20

let child2 = new Child(25);
child2.colors.push('black');
console.log(child1.colors); // ['red', 'blue', 'green', 'black']  <-- 注意：共享了父类型的引用类型属性
console.log(child2.colors); // ['red', 'blue', 'green', 'black']

原型链继承的优点是实现简单，父类的方法可以被子类复用。缺点也很明显，一是子类型的所有实例共享父类型原型对象的属性，特别是引用类型的属性，一个实例修改了，所有实例都会受到影响。二是创建子类型实例时，无法向父类型的构造函数传递参数。

构造函数继承 (借用构造函数)

构造函数继承，又称借用构造函数或伪造对象，是在子类型的构造函数中调用父类型的构造函数。

function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child(name, age) {
  Parent.call(this, name); // 关键：在子类型构造函数中调用父类型构造函数
  this.age = age;
}

Child.prototype.sayAge = function() {
  console.log(this.age);
};

let child1 = new Child('Child1', 20);
child1.colors.push('black');
console.log(child1.colors); // ['red', 'blue', 'green', 'black']

let child2 = new Child('Child2', 25);
console.log(child2.colors); // ['red', 'blue', 'green']  <-- 各自拥有父类型属性的副本
// child1.sayName(); // TypeError: child1.sayName is not a function

构造函数继承解决了原型链继承的两个问题：可以传递参数，并且每个实例都有父类型属性的副本。但缺点是父类型定义在原型对象上的方法，子类型无法访问，只能通过构造函数中定义，这导致函数复用性不高。

组合继承

组合继承结合了原型链继承和构造函数继承的优点，是 JavaScript 中常用的继承模式。它使用原型链继承来实现对父类型原型对象上的属性和方法的继承，使用构造函数继承来实现对父类型实例属性的继承。

function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child(name, age) {
  Parent.call(this, name); // 构造函数继承
  this.age = age;
}

Child.prototype = new Parent(); // 原型链继承
Child.prototype.constructor = Child; // 修正constructor指向

Child.prototype.sayAge = function() {
  console.log(this.age);
};

let child1 = new Child('Child1', 20);
child1.colors.push('black');
console.log(child1.colors); // ['red', 'blue', 'green', 'black']
child1.sayName(); // Child1

let child2 = new Child('Child2', 25);
console.log(child2.colors); // ['red', 'blue', 'green']
child2.sayName(); // Child2

组合继承避免了原型链继承的属性共享问题，也避免了构造函数继承的方法无法复用问题。但是，组合继承有一个缺点：父类型的构造函数会被调用两次，一次是在设置子类型原型的时候，一次是在创建子类型实例的时候。

原型式继承

原型式继承的思路是借助 Object.create() 方法，可以创建一个新对象，同时指定新对象的原型。

function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

let person = {
  name: 'Nicholas',
  friends: ['Shelby', 'Court', 'Van']
};

let anotherPerson = object(person);
anotherPerson.name = 'Greg';
anotherPerson.friends.push('Rob');

let yetAnotherPerson = object(person);
yetAnotherPerson.name = 'Linda';
yetAnotherPerson.friends.push('Barbie');

console.log(person.friends); // ["Shelby", "Court", "Van", "Rob", "Barbie"]

object() 函数本质上是对传入的对象进行一次浅复制。原型式继承的主要问题仍然是包含引用类型值的属性会被所有实例共享。

寄生式继承

寄生式继承是在原型式继承的基础上，增加一个函数来增强对象，然后返回增强后的对象。

function createAnother(original) {
  let clone = object(original); // 通过调用函数创建一个新对象
  clone.sayHi = function() { // 以某种方式增强这个对象
    console.log('hi');
  };
  return clone; // 返回这个对象
}

let person = {
  name: 'Nicholas',
  friends: ['Shelby', 'Court', 'Van']
};

let anotherPerson = createAnother(person);
anotherPerson.sayHi(); // hi

寄生式继承的缺点与原型式继承一样，也是包含引用类型值的属性会被所有实例共享。

寄生组合式继承

寄生组合式继承是 JavaScript 中最成熟的继承模式，它避免了组合继承中父类型构造函数被调用两次的问题。

function inheritPrototype(subType, superType) {
  let prototype = Object.create(superType.prototype); // 创建对象
  prototype.constructor = subType; // 增强对象
  subType.prototype = prototype; // 指定对象
}

function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.sayName = function() {
  console.log(this.name);
};

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

inheritPrototype(Child, Parent);

Child.prototype.sayAge = function() {
  console.log(this.age);
};

let child1 = new Child('Child1', 20);
child1.colors.push('black');
console.log(child1.colors); // ['red', 'blue', 'green', 'black']
child1.sayName(); // Child1

let child2 = new Child('Child2', 25);
console.log(child2.colors); // ['red', 'blue', 'green']
child2.sayName(); // Child2

inheritPrototype 函数完成了寄生组合式继承的关键步骤：创建父类型原型的一个副本，并将子类型的原型指向这个副本。这样，就避免了调用两次父类型构造函数。

为什么组合继承存在两次调用父类构造函数的问题？

组合继承中，Child.prototype = new Parent() 会调用一次 Parent 构造函数，目的是让 Child.prototype 能够访问 Parent.prototype 上的方法。 之后，在创建 Child 实例时， Parent.call(this, name) 又会调用一次 Parent 构造函数，目的是初始化 Child 实例的属性。

如何选择合适的继承方式？

如果仅仅是为了复用父类的方法，原型链继承或许足够。但如果需要传递参数或避免共享引用类型属性，组合继承或寄生组合式继承更为合适。寄生组合式继承通常被认为是最佳实践，因为它避免了父类构造函数的重复调用，性能更高。

ES6 Class 的 extends 关键字是哪种继承方式的语法糖？

ES6 的 class 语法糖，其 extends 关键字实现的继承方式，本质上是寄生组合式继承。它隐藏了原型链操作的细节，使得代码更加简洁易懂。

如何理解原型链？

原型链是 JavaScript 中对象查找属性和方法时的搜索路径。当访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 引擎会沿着该对象的原型链向上查找，直到找到该属性或方法，或者到达原型链的顶端（null）。每个对象都有一个 __proto__ 属性（非标准，但浏览器普遍支持），指向其构造函数的原型对象。而构造函数的原型对象又是一个对象，也有自己的 __proto__ 属性，指向其构造函数的原型对象，以此类推，就形成了一条链式结构，这就是原型链。理解原型链是理解 JavaScript 继承的基础。

到这里，我们也就讲完了《JS继承实现方式全解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于原型链,extends,class,寄生组合式继承,JS继承的知识点！