30

JavaScript 基础:继承

 5 years ago
source link: https://www.tuicool.com/articles/UJZ32q
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

今天,我们要讲的是 JS 继承的知识,包括 原型继承, 构造函数继承, 组合继承及其优化, 寄生式组合继承。

原型继承

子类的原型对象设置为父类的实例:

function C1 (){}
function C2 (){}
C2.prototype = new C1();
C2.prototype.constructor = C2;

这样:每个子类实例就会继承父类实例的属性,但由于继承的属性在子类的原型上,所以继承的属性在不同实例之间都是共享的,没有隔离。

构造函数继承

子类的构造函数内部,执行了父类的构造函数:

function C1 (){}
function C2 (...args){
    C1.call(this, ...args);
}

这样:每个子类实例的继承属性就隔离了,但继承不到父类的原型方法;

组合继承

结合以上两种

function C1 (){}
function C2 (...args){
    C1.call(this, ...args);
}
C2.prototype = new C1();
C2.prototype.constructor = C2;

这样:继承的私有属性隔离,继承的原型方法可以公用,但是执行了两次父类的构造函数,第二次是多余的。

组合继承优化

结合前两种方法,但把子类的原型对象指向父类的原型对象,而不是实例。

function C1 (){}
function C2 (...args){
    C1.call(this, ...args);
}
C2.prototype = C1.prototype;
C2.prototype.constructor = C2;

这样:就避免执行了两次父类的构造函数,但破坏了父类的原型对象的 constructorC1.proptotype.constructor ,本来应该指向 C1 的,现在指向 C2 了。

寄生组合继承

将子类的原型对象设置为一个新的对象,该对象的 __proto__ 指向父类的原型。

function C1 (){}
function C2 (...args){
    C1.call(this, ...args);
}
C2.prototype = Object.create(C1.prototype);
C2.prototype.constructor = C2;

这样就完美了!


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK