JS继承怎么做？五种方式全面讲解

想知道JS怎么实现继承吗？本文为你全面解析五种JS继承方式，助你掌握JS面向对象编程的关键技能。JS继承的核心在于对象属性和方法的复用与扩展。文章深入剖析原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承以及ES6 class extends的原理与优缺点。其中，组合继承是JS中最常用的继承方式，它结合了原型链和构造函数的优点，既能继承实例属性，又能继承原型方法，有效避免了共享属性的问题。而ES6的class extends语法糖，底层仍基于原型链，但语法更简洁，更符合面向对象编程习惯。选择哪种继承方式，需要根据实际需求进行权衡。

JS实现继承的核心是让对象访问另一对象的属性和方法以实现复用与扩展。1.原型链继承通过子类原型指向父类实例实现，但存在共享引用属性的问题；2.构造函数继承通过call/apply调用父类构造函数解决共享问题，但无法继承原型方法；3.组合继承结合两者优点，是最常用方式，但会调用两次父类构造函数；4.原型式继承基于Object.create()实现，适用于基于现有对象创建新对象，但同样存在共享属性问题；5.寄生式继承在原型式基础上增强对象，但添加函数效率低；6.ES6 class extends是语法糖，底层仍为原型链，语法更简洁且符合面向对象习惯。选择继承方式需根据具体需求权衡优缺点。

JS实现继承，本质上是为了让一个对象能够访问另一个对象的属性和方法，从而实现代码的复用和扩展。常见的实现方式有原型链继承、构造函数继承、组合继承、原型式继承和寄生式继承，各有优缺点，选择哪种取决于具体的应用场景和需求。

原型链继承

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

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

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

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

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

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

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

child1.colors.push('black');

let child2 = new Child();
console.log(child2.colors); // ["red", "blue", "green", "black"]  <-- 问题：child1修改了colors，影响了child2

问题在于，原型链继承会导致所有子类型的实例共享父类型原型上的属性。如果父类型原型上的属性是引用类型，那么一个子类型的实例修改了这个属性，会影响到所有其他子类型的实例。另外，在创建子类型的实例时，无法向父类型的构造函数传递参数。

构造函数继承 (又称：经典继承)

构造函数继承是在子类型的构造函数中调用父类型的构造函数，通过call或apply来实现。

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;
}

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

let child2 = new Child('Child2', 22);
console.log(child2.name); // Child2
console.log(child2.colors); // ["red", "blue", "green"]  <-- 解决了共享问题

// child1.sayName();  // TypeError: child1.sayName is not a function  <-- 问题：无法继承父类型原型上的方法

构造函数继承解决了原型链继承中共享属性的问题，并且可以在创建子类型的实例时向父类型的构造函数传递参数。但是，它无法继承父类型原型上的方法。

组合继承 (最常用的继承方式)

组合继承结合了原型链继承和构造函数继承的优点。使用原型链继承来实现对父类型原型属性和方法的继承，使用构造函数继承来实现实例属性的继承。

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.name); // Child1
console.log(child1.colors); // ["red", "blue", "green", "black"]
child1.sayName(); // Parent

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

组合继承解决了原型链继承和构造函数继承各自存在的问题，是JavaScript中最常用的继承方式。但是，它也有一个缺点：父类型的构造函数会被调用两次（一次是在创建子类型原型时，一次是在创建子类型实例时）。

原型式继承

原型式继承是借助Object.create()方法来实现的。它创建一个新对象，并将传入的对象作为新对象的原型。

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

let person = {
  name: 'Parent',
  colors: ['red', 'blue', 'green']
};

let anotherPerson = object(person);
anotherPerson.name = 'Child1';
anotherPerson.colors.push('black');

let yetAnotherPerson = object(person);
yetAnotherPerson.name = 'Child2';
yetAnotherPerson.colors.push('yellow');

console.log(person.colors); // ["red", "blue", "green", "black", "yellow"]  <-- 问题：共享属性

原型式继承的思路是，不必为了指定类型创建一个构造函数。当只有一个对象，想在它的基础上创建另一个对象时，可以使用原型式继承。缺点是，所有通过原型式继承得到的对象都会共享原型上的属性。

寄生式继承

寄生式继承是在原型式继承的基础上，增加一些额外的属性和方法。

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

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

let person = {
  name: "Nicholas",
  age: 29
};

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

寄生式继承的缺点是，由于给对象添加函数会导致效率低下，这一点跟构造函数模式类似。

ES6 Class extends 语法糖

ES6 引入了 class 关键字，以及 extends 关键字，使得继承的语法更加简洁明了。但这仅仅是语法糖，其底层仍然是基于原型链的。

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

  sayName() {
    console.log(this.name);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name); // 调用父类的constructor(name)
    this.age = age;
  }

  sayAge() {
    console.log(this.age);
  }
}

let child1 = new Child('Child1', 20);
child1.sayName(); // Child1
child1.sayAge(); // 20
child1.colors.push('black');

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

extends 关键字实现了原型链的继承，super() 方法用于调用父类的构造函数。class 语法糖让继承的实现更加清晰易懂。

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

选择合适的继承方式取决于你的具体需求：

• 需要继承实例属性和方法，并且希望避免共享原型属性： 组合继承或 ES6 的 class extends 是不错的选择。
• 只需要继承原型属性和方法： 原型链继承可以考虑，但要注意共享属性的问题。
• 只想基于一个现有对象创建另一个对象： 原型式继承或寄生式继承可以考虑。

为什么组合继承是最常用的继承方式？

组合继承解决了原型链继承和构造函数继承各自的缺点，既可以继承实例属性，又可以继承原型方法，并且可以避免共享原型属性。虽然父类构造函数会被调用两次，但这种性能损耗在大多数情况下是可以接受的。

ES6 的 class extends 语法糖解决了哪些问题？

ES6 的 class extends 语法糖并没有改变继承的本质，它仍然是基于原型链的。但它解决了以下问题：

• 语法更加简洁明了： 使得继承的实现更加清晰易懂。
• 更符合面向对象编程的习惯： class 关键字让 JavaScript 看起来更像传统的面向对象语言。
• super() 方法的使用： 使得调用父类构造函数和方法更加方便。

文中关于原型链,构造函数,JS继承,组合继承,ES6classextends的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS继承怎么做？五种方式全面讲解》文章吧，也可关注golang学习网公众号了解相关技术文章。