JS继承的终极答案?

97 阅读1分钟

本文我是在看了若干关于js继承的文章后,有感而发,不一定对,大家觉得有不合适的地方,还请手下留情!

看了很多关于js继承的文章,有什么 原型链继承,构造函数继承,组合继承,原型式继承,寄生继承,组合寄生继承,实在太多,不胜烦扰,本文就不一一列举了,接下来直接上代码,顺带着提一下这些方案,同时附上改进后的代码

// 要想继承,先来个父类
function Parent (name, age) {
    this.name = name;
    this.age = age;
}
Parent.prototype.showName = funtion () {
    console.log(this.name)
}

// 当然还要有子类
function Child (name, age, gender) {
    // 注意这行代码,这是 “构造函数继承” 的核心代码,可以借此调用父类的构造函数, "继承"父类的属性
    Parent.call(this, name, age);

    // 子类的其它属性
    this.gender = gender;
}

// 原型链继承、寄生继承、原型式继承 的核心代码被下面两句替代
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child

// ES6之后,上面两句代码可以直接写成这样(当然ES6有更直接的类的继承,实在不用这么麻烦)
Object.setPrototypeOf(Child.prototype, Parent.prototype)


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

改进后的继承方案主要利用了 Object.create 方法的特性,比起 new一个父类,更加简洁,也不存在 new 带来的一些副作用;

还利用了ES6的新特性 Object.setPrototypeOf