JS实现继承的6种方式

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情

今天又是忙碌的一天，就不写长篇大论了，继续分享javascript基础知识，本篇是关于继承的，面试八股文，希望大家可以拿到自己满意的offer。

实现继承的6种方式

原型链

原型链继承

function Parent() {
    this.name = 'parent';
    this.arr = [1, 2, 3];
}

Parent.prototype.getName = function() {
    return this.name;
}

function Child() {
}

Child.prototype = new Parent();
const child1 = new Child();
const child2 = new Child();
child1.arr.push(999);
console.log('child1', child1);
console.log('child2', child2);

缺点：

原型上的变量被所有实例共享，当一个实例改变引用类型里面的值时会影响其他实例
不能向父类构造函数传参

构造函数继承

优化了原型链继承共享原型变量的问题，也可以向父类构造函数传参

function Parent() {
    this.name = 'parent';
    this.arr = [1, 2, 3];
}

Parent.prototype.getName = function() {
    return this.name;
}

function Child() {
    Parent.call(this); //* 调用父类的构造器
}

const child1 = new Child();
const child2 = new Child();
child1.arr.push(999);
console.log('child1', child1);
console.log('child2', child2)

缺点：

无法复用父类的方法

组合继承

把原型链继承和构造器继承结合起来

function Parent() {
    console.log('call Parent');
    this.name = 'parent';
    this.arr = [1, 2, 3];
}

Parent.prototype.getName = function() {
    return this.name;
}


function Child() {
    Parent.call(this); //* 1
}

Child.prototype = new Parent(); //* 2
const child1 = new Child();
const child2 = new Child();
child1.arr.push(999);
console.log('child1', child1);
console.log('child2', child2);

缺点:

多调用了一次构造函数

原型继承

以上是基于函数的继承，现在基于现有的对象继承

let parent = {
    name: 'parent'
}

// 通过Object.create()
let child = Object.create(parent);
// 或者通过下面的方法create也是一样
function create(parent) {
    function F() {};
    F.prototype = parent;
    return new F();
}
console.log(child);

缺点：

也是共享了父类的变量

寄生式继承

在原型继承的基础上增强

let parent = {
name: 'parent'
}
// 通过Object.create()
function extend(parent) {
    let child = Object.create(parent);
    child.getName = function() { // *只是上面的增强
        return this.name;
    }
    return child;
}
console.log(child);

寄生组合式继承

优化了组合继承需要多调一次构造方法的缺点

同时也不会共享父类的变量

也能做到函数的复用

function Parent() {
    this.name = 'parent';
}
Parent.prototype.getName = function() {
    return this.name;
}
function Child() {
    Parent.call(this);
    this.age = 18;
}
function extend(Child, Parent) {
    Child.prototype = Object.create(Parent.prototype);
    Child.prototype.contructor = Child;
}
extend(Child, Parent);
const obj = new Child();

babel将ES6的extend转换成ES5代码的时候，使用的就是寄生组合继承