JS-继承(es5,es6)

发布时间:2019-08-15 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JS-继承(es5,es6)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

首先需要了解原型链机制@H_304_3@: 原型链作为实现继承的主要方法,其基本思想就是利用原型让一个引用类型继承另 一个引用类型的属性和方法.

构造函数、原型、实例之间的关系: 每个构造函数都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针(constructor),而实例都包含一个指向原型对象的内部指针(__PRopto__).

自我理解: 其实每个Function都是Object基类的一个实例,所以每个Function上都有一个__proto__指向了Object.prototype.当查找一个实例的属性时,会先从这个实例的自定义属性上找,如果没有的话通过__proto__去实例所属类的原型上去找,如果还没有的话再通过原型(原型也是对象,只要是对象就有__proto__属性)的__proto__到Object的原型上去找,一级一级的找,如果没有就undefined(Object的__proto__返回undefined).

(一) 原型链继承 :

 function Parent(name) { 
    this.name = name;
 }
 Parent.prototyPE.printName = function() {
    console.LOG('parent name:', this.name);
}
function Child(name) {
    this.name = name;
}
Child.prototype = new Parent('father');
Child.prototype.constructor = Child;//由于Child.prototype继承Parent,导致constructor丢失
Child.prototype.printName = function() {
    console.log('child name:', this.name);
}
VAR child = new Child('son');
child.sayName();    // child name: son

这种方法存在两个缺点:

1.子类型无法给超类型传递参数;
2.Child.prototype.sayName 必须写在 Child.prototype = new Parent('father'); 
之后,不然就会被覆盖掉。
(二) 类式继承:

 function Parent(name) { 
    this.name = name;
 }
 Parent.prototype.printName = function() {
    console.log('parent name:', this.name);
 }
 Parent.prototype.DOSomthing = function() {
    console.log('parent do something!');
 }
function Child(name, parentName) {
    Parent.call(this, parentName);
    this.name = name;
}
Child.prototype.printName = function() {
    console.log('child name:', this.name);
}
var child = new Child('son');
child.printName();   // child name: son
child.doSomthing();   // TypeError: child.doSomthing is not a function

相当于 Parent 这个函数在 Child 函数中执行了一遍,并且将所有与 this 绑定的变量都切换到了 Child 上,这样就克服了第一种方式带来的问题。
缺点:没有原型,每次创建一个 Child 实例对象时候都需要执行一遍 Parent 函数,无法复用一些公用函数。

(三) 组合式继承:前两种方式的结合

function Parent(name) {

    this.name = name;
}

Parent.prototype.printName = function() {
    console.log('parent name:', this.name);
}
Parent.prototype.doSomething = function() {
    console.log('parent do something!');
}
function Child(name, parentName) {
    Parent.call(this, parentName);// 第二次调用
    this.name = name;
}

Child.prototype = new Parent();// 第一次调用      
Child.prototype.constructor = Child;
Child.prototype.printName = function() {
    console.log('child name:', this.name);
}

var child = new Child('son');
child.printName();    // child name: son
child.doSomething();   // parent do something!

组合式继承是比较常用的一种继承方法,其背后的思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。

这样,既通过在原型上定义方法实现了函数复用,又保证每个实例都有它自己的属性。

组合式继承是 JS 最常用的继承模式,但组合继承使用过程中会被调用两次:一次是创建子类型的时候,另一次是在子类型构造函数的内部。

第一次调用构造函数显然是没有必要的,因为第一次调用构造函数时候不需要函数内部的那些实例属性,这么写只是想获得其原型上的方法罢了,所以这时候你可能会这样写:

Child.prototype = Parent.prototype;

这样写显然是不对的:
1.首先,你这样写的话相当于是子类和父类都指向同一个对象,这时候如果你添加了新的方法给 Child 但实际上 Parent 并不需要,相当于强行给 Parent 添加了一个未知的方法。
2.其次,仔细想想,这样体现不出继承的多态性,比如此时子类想要重写父类的 getName 的方法,那么父类的方法也就会随之修改,这显然违背了多态性。

也就是说我们第一次调用构造函数的时候,其实是不管构造函数里面的内容,这是我们可以new一个空函数,将其prototype指向Parent.prototype,代码如下:

(四) 寄生组合式继承:

function Parent(name) {
    this.name = name;
}
Parent.prototype.printName = function() {
    console.log('parent name:', this.name);
}

function Child(name, parentName) {
    Parent.call(this, parentName);  
    this.name = name;    
}

function inherITPrototype(Parent, Child) {
    Child.prototype = Object.create(Parent.prototype);   //修改
    Child.prototype.constructor = Child;
}

inheritPrototype(Parent, Child);
Child.prototype.printName = function() {
    console.log('child name:', this.name);
}
Child.prototype.constructor = Child;

var parent = new Parent('father');
parent.printName();    // parent name: father

var child = new Child('son', 'father');
child.printName();     // child name: son
(五) ES 6 继承:

class Parent {
    constructor(name) {
        this.name = name;
    }
    doSomething() {
        console.log('parent do something!');
    }
    printName() {
        console.log('parent name:', this.name);
    }
}

class Child extends Parent {
    constructor(name, parentName) {
        super(parentName);
        this.name = name;
    }
    printName() {
         console.log('child name:', this.name);
    }
}
const child = new Child('son', 'father');
child.printName();            // child name: son
child.doSomething();        // parent do something!
const parent = new Parent('father');
parent.printName();           // parent name: father
    

脚本宝典总结

以上是脚本宝典为你收集整理的JS-继承(es5,es6)全部内容,希望文章能够帮你解决JS-继承(es5,es6)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。