Javascript 继承

[XiaoChengyin]

Javascript 继承

原型链继承

function Parent() {}
function Child() {}
Child.prototype = new Parent()
Child.prototype.constructor = Child

缺点：1、属性定义在原型上会被共享 2、不能单独向父类的构造函数传递参数

借用构造函数继承

function Parent() {}
function Child() {
    Parent.call(this)
}

只是复制了父类的实例属性，无法访问父类的原型链

组合继承

function Parent() {}
function Child() {
    Parent.call(this)
}
Child.prototype = new Parent()
Child.prototype.constructor = Child

结合了原型链继承和借用构造函数继承，解决了上述缺陷但至少要调用两次父类的构造函数，子类的实例和原型上都继承了父类的实例属性(原型属性被屏蔽)

原型式继承

function Parent() {}
function Child() {}
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child

与借用构造函数相反，原型式继承实现了原型属性继承但没有实现实例属性的继承

寄生式继承

function Parent() {}
function Child() {
    this.say = function() {}
}
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child

寄生式继承是在原型式继承的基础上为子类实例添加一些方法，但他们共同的问题是无法继承父类的实例属性

寄生组合式继承

function Parent() {}
function Child() {
    Parent.call(this)
}
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child

寄生组合式继承是在组合式继承中用原型式继承代替原型链继承

Class继承

具有两条继承链，在寄生组合式继承的基础上，子类能够继承父类的静态方法，即 Child.__proto__ === Parent

Vue 中的继承

function Vue () {
    this._init()
}
function VueComponent () {
    this._init()
}
VueComponent.prototype = Object.create(Vue.prototype)
VueComponent.prototype.constructor = VueComponent
VueComponent.extend = Vue.extend
// ...

在寄生组合式继承的基础上继承了父类的静态方法