前言

当你去面试时，面试官可能会问你一个问题，让你谈一谈js中的继承。这时可能你会想起原型链继承，可能会说起构造函数继承，但这时可能面试官会让你直接手写继承的方法，你又会选择写哪一种继承的方法呢。今天就来谈一谈js的继承吧。

正文

面试官让你谈一谈继承，那么肯定要先说出继承的概念，然后再说方法。

继承的概念： 让子类的实例能够访问到父类上的属性。

function Parent() {
    this.name = 'Tom';
    this.like = [1, 2, 3];
}
function Child() {
    this.type = 'children';
}

let s1 = new Child()
console.log(s1.name); // Tom

如上面的代码所示，分别构建了两个函数 Parent 和 Child ，通过 new 关键字创建一个 Child 实例对象 s1，现在访问 s1.name，希望得到的结果是 Tom。这样就是希望子类的实例 s1 可以访问到父类 Parent 上的属性。那么下面就来细聊一下各种实现继承的方法。

方法一 原型链继承

方法一是原型链继承，将子类的 prototype 属性设置为父类的一个实例对象。

function Parent() {
    this.name = 'Tom';
    this.like = [1, 2, 3];
}
function Child() {
    this.type = 'children';
}
Child.prototype = new Parent()
Child.prototype.constructor = Child

let s1 = new Child()
let s2 = new Child()
console.log(s1.name); // Tom
// s1.__proto__ === s2.__proto__

在JavaScript中，每个函数都有一个 prototype 属性，这个属性是一个对象，用来存储所有实例共享的属性和方法。当你使用 new关键字创建一个对象时，这个新对象的__proto__属性将指向构造函数的 prototype。

缺点：子类实例会继承同一个原型对象，内存共享，所以实例之间会相互影响。

小知识点：为什么要手动指定子类的constructor属性，添加Child.prototype.constructor = Child

一个构造函数，它的原型上面就本身就有construct属性。正常一个实例对象。它的隐式原型因为等于构造函数的显式原型，所以它的隐式原型上面也一定有一个constructor属性，而这个constructor的值是就是这个构造函数。在原型链的继承之后，子类构造函数原型上面的constructor会消失，所以就要手动指定子类的constructor属性。

方法二 构造函数继承

方法二是构造函数继承，通过在子构造函数中调用父构造函数来实现，通常是通过call()方法。可以将父构造函数中的this指向子构造函数创建的新对象。

Parent.prototype.getName = function () {
    return this.name
}
function Parent() {
    this.name = 'Tom';
    this.like = [1, 2, 3];
}
function Child() {
    Parent.call(this)
    this.type = 'children';
}

let s1 = new Child()
s1.like.push(4)

let s2 = new Child()
console.log(s1.like);// [1, 2, 3, 4]
console.log(s2.like);// [1, 2, 3]
console.log(s1.getName()); // TypeError: s1.getName is not a function

上面的例子中，在子构造函数的内部，添加了 Parent.call(this) ，这里面的call方法是显式绑定，将 Parent 的 this 指向 Child 中，Child 实例对象也就继承了 Parent 实例对象上的属性和方法。

优点：子类实例之间不会相互影响

缺点：只能继承父类实例属性和方法，不能继承父类的原型属性和方法

方法三 组合继承

组合继承，顾名思义，是原型链继承和构造函数继承的组合，就是方法一和方法二一起用。

Parent.prototype.getName = function () {
    return this.name
}
function Parent() {
    this.name = 'Tom';
    this.like = [1, 2, 3];
}
function Child() {
    Parent.call(this)
    this.type = 'children';
}
Child.prototype = new Parent()
Child.prototype.constructor = Child

let s1 = new Child()
console.log(s1.getName());// Tom

优点：实例之间不会互相影响，且子类也可以继承父类的原型属性和方法。

缺点：调用了两次父类构造函数，父类构造函数会执行两次，性能开销大。

方法四 原型式继承 （对象）

原型式继承，创建一个新对象时，可以直接将父类设置为子类的原型，这样子类就可以继承父类的属性和方法。一般使用Object.create()方法，可以创建一个新的对象，隐式继承原对象。

let parent = {
    name: 'Tom',
    age: 40,
    like: [1, 2],
    getLike: function () {
        return this.like
    }
}

let child1 = Object.create(parent)
let child2 = Object.create(parent)
child1.like.push(3)

console.log(child1);// {}
console.log(child2.like);// [1, 2, 3]

缺点：多个实例之间继承到的引用类型是相同的地址，会相互影响。

小知识点：并不是所有的对象都有原型，使用Object.create(null)创建的对象，它没有原型。

方法五 寄生式继承 （对象）

寄生式继承并没有改掉原型式继承的缺点，只是在原型式继承的基础上再优化了一下，让子对象默认具有自己的属性。

let parent = {
    name: 'Tom',
    age: 40,
    like: [1, 2]
}

function clone(obj) {
    let clone = Object.create(obj)
    clone.type = 'child'
    clone.getLike = function () {
        return this.like
    }
    return clone
}

let child = clone(parent)
console.log(child);// { type: 'child', getLike: [Function (anonymous)] }

优点：同原型式继承，但是可以让子对象默认具有自己的属性。

缺点：多个实例之间继承到的引用类型是相同的地址，会相互影响。

方法六 寄生组合继承（ES5最优雅的继承）

之前因为组合继承的开销大，现在就出现了可以解决组合继承缺点的方法——寄生组合继承，只调用一次父类构造函数就可以实现继承。这里面用了Object.create()方法，创建一个新的对象，让子类的原型等于父类的原型，子类可以继承父类的原型属性和方法。

Parent.prototype.getName = function () {
    return this.name
}
function Parent() {
    this.name = 'Tom';
    this.like = [1, 2, 3];
}
function Child() {
    Parent.call(this)
    this.type = 'children';
}
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child

let s1 = new Child()
console.log(s1.getName());

优点：继承了父类的实例属性和方法，也继承了父类的原型属性和方法，避免了父类构造函数执行两次，也避免了引用类型的属性被共享。

方法七 ES6类继承

ES6类继承的底层的继承机制仍然是基于原型链的，只是将寄生组合继承封装成了类继承。

使用 extends 关键字让一个类继承另一个类，super 关键字用于调用父类的构造函数，并且可以访问父类的属性和方法。

class Parent {
    constructor(name) {
        this.name = name
        this.like = [1, 2, 3]
    }
    getName() {
        return this.name
    }
}

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

let c = new Child('Jerry')

console.log(c.getName());// Jerry

在ES6中，super()关键字不仅用于调用父类的构造函数，而且可以传递参数。

结语

在本篇文章中，我们详细探讨了JavaScript中实现继承的多种方法，从原型链继承到构造函数继承，再到组合继承、原型式继承、寄生式继承、寄生组合继承，直至ES6中引入的类继承。每种继承方式都有其特点和应用场景，理解它们之间的差异和优缺点对于编写高效、可维护的代码至关重要。希望可以给你带来帮助。