如何在JavaScript中实现继承？-小浪学习网

JavaScript中实现继承的主要方式有：1.原型链继承，2.构造函数继承，3.组合继承，4.原型式继承，5.寄生式继承，6.寄生组合式继承，7.es6类继承。寄生组合式继承和es6类继承是目前最推荐的做法，它们在性能和可维护性上表现较好。

如何在JavaScript中实现继承？

在JavaScript中实现继承有好几种方式，每一种都各有优缺点。在开始之前，我们要明白，JavaScript是一种基于原型的语言，而不是基于类的语言，尽管ES6引入了class语法，但它仍然是基于原型实现的。今天，我将分享几种实现继承的方法，并结合自己的经验来探讨它们的优劣。

首先，我们要搞清楚继承的本质：子类可以使用父类的属性和方法，并且可以根据需要重写或扩展这些方法。在JavaScript中，这可以通过原型链来实现。

原型链继承

原型链继承是JavaScript中最基础的继承方式。它的核心思想是让子类的原型指向父类的实例，从而继承父类的属性和方法。

立即学习“Java免费学习笔记（深入）”；

function Parent(name) {     this.name = name || 'Parent'; }  Parent.prototype.sayName = function() {     console.log(`My name is ${this.name}`); };  function Child(name) {     Parent.call(this, name); // 调用父类构造函数     this.name = name || 'Child'; }  Child.prototype = Object.create(Parent.prototype); Child.prototype.constructor = Child;  const child = new Child('Little Child'); child.sayName(); // 输出: My name is Little Child

这种方法的优点是简单直观，但也有缺点：子类实例共享父类原型上的引用类型属性，这可能导致意外的共享状态。此外，子类无法向父类构造函数传递参数，除非在子类构造函数中手动调用父类构造函数。

构造函数继承

为了解决原型链继承中的共享问题，我们可以使用构造函数继承。这种方法通过在子类构造函数中调用父类构造函数来实现。

function Parent(name) {     this.name = name || 'Parent';     this.colors = ['red', 'blue', 'green']; }  function Child(name) {     Parent.call(this, name); // 继承父类属性     this.name = name || 'Child'; }  const child1 = new Child('Child 1'); const child2 = new Child('Child 2');  child1.colors.push('black'); console.log(child1.colors); // ['red', 'blue', 'green', 'black'] console.log(child2.colors); // ['red', 'blue', 'green']

这种方法的优点是每个实例都有自己的属性，不会共享引用类型属性。但缺点是无法继承父类原型上的方法和属性。

组合继承

为了结合原型链和构造函数继承的优点，我们可以使用组合继承。这种方法既能继承父类原型上的方法，又能确保每个实例有自己的属性。

function Parent(name) {     this.name = name || 'Parent';     this.colors = ['red', 'blue', 'green']; }  Parent.prototype.sayName = function() {     console.log(`My name is ${this.name}`); };  function Child(name) {     Parent.call(this, name); // 继承属性     this.name = name || 'Child'; }  Child.prototype = Object.create(Parent.prototype); Child.prototype.constructor = Child;  const child = new Child('Little Child'); child.sayName(); // 输出: My name is Little Child

这种方法的优点是既能继承父类原型上的方法，又能确保每个实例有自己的属性。但缺点是父类构造函数被调用了两次，可能会导致性能问题。

原型式继承

原型式继承是Douglas Crockford提出的一种继承方式，它通过克隆一个对象来实现。

function object(o) {     function F() {}     F.prototype = o;     return new F(); }  const parent = {     name: 'Parent',     colors: ['red', 'blue', 'green'],     sayName: function() {         console.log(`My name is ${this.name}`);     } };  const child = object(parent); child.name = 'Child'; child.sayName(); // 输出: My name is Child

这种方法的优点是简单，但缺点是所有实例共享同一个原型，引用类型属性会共享。

寄生式继承

寄生式继承是在原型式继承的基础上，增强对象的继承方式。

function createAnother(original) {     const clone = Object.create(original);     clone.sayHi = function() {         console.log('Hi');     };     return clone; }  const parent = {     name: 'Parent',     colors: ['red', 'blue', 'green'],     sayName: function() {         console.log(`My name is ${this.name}`);     } };  const child = createAnother(parent); child.name = 'Child'; child.sayHi(); // 输出: Hi child.sayName(); // 输出: My name is Child

这种方法的优点是可以增强对象，但缺点是每次创建对象都要重新定义方法，性能可能不如预期。

寄生组合式继承

寄生组合式继承是目前公认的最佳继承方式，它结合了寄生式继承和组合继承的优点，避免了组合继承中父类构造函数被调用两次的问题。

function inheritPrototype(child, parent) {     const prototype = Object.create(parent.prototype);     prototype.constructor = child;     child.prototype = prototype; }  function Parent(name) {     this.name = name || 'Parent';     this.colors = ['red', 'blue', 'green']; }  Parent.prototype.sayName = function() {     console.log(`My name is ${this.name}`); };  function Child(name) {     Parent.call(this, name); // 继承属性     this.name = name || 'Child'; }  inheritPrototype(Child, Parent);  const child = new Child('Little Child'); child.sayName(); // 输出: My name is Little Child

这种方法的优点是高效且灵活，缺点是实现起来相对复杂。

ES6类继承

ES6引入了class语法，使得继承更加直观和易于理解，但它仍然是基于原型链实现的。

class Parent {     constructor(name) {         this.name = name || 'Parent';         this.colors = ['red', 'blue', 'green'];     }      sayName() {         console.log(`My name is ${this.name}`);     } }  class Child extends Parent {     constructor(name) {         super(name); // 调用父类构造函数         this.name = name || 'Child';     } }  const child = new Child('Little Child'); child.sayName(); // 输出: My name is Little Child

这种方法的优点是语法简洁，易于理解，但本质上仍然是基于原型链的。