在ECMAscript中形容了原型链的概念,并将原型链作为实现继承的次要办法,其根本思维就是利用原型让一个援用类型继承另一个援用类型的属性和办法。

构造函数和原型还有实例之间的关系:每个构造函数都有一个原型对象(prototype),原型对象都蕴含一个指向构造函数的指针(constructor),而实例都蕴含一个指向原型对象的外部指针(proto)。 来一张手残党画的图

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

能够说援用类型之间的继承就是通过原型链机制实现的。到这里咱们就可以看一下第一种继承办法,原型继承

原型继承

把父类的公有+私有的属性和办法,都作为子类私有的属性。

外围:不是把父类公有+私有的属性克隆一份截然不同的给子类的私有吧;他是通过__proto__建设和子类之间的原型链,当子类的实例须要应用父类的属性和办法的时候,能够通过__proto__一级级找上去应用;

function Parent(){ this.x = 199; this.y = 299;}Parent.prototype.say = function(){ console.log('say')}function Child(){ this.g = 90;}// 将父类的实例挂到子类的 prototype 上Child.prototype = new Parent();var p = new Parent();var c = new Child();console.dir(c)

实现的实质是重写了原型对象 ,通过将子类的原型指向了父类的实例,所以子类的实例就能够通过 __proto__拜访到 Child.prototype 也就是 Parent的实例,这样就能够拜访到父类的公有办法,而后再通过__proto__指向父类的prototype就能够取得到父类原型上的办法。这样就做到了将父类的公有、私有办法和属性都当做子类的私有属性。这样就通过原型链实现了继承。然而别忘了默认的原型,因为所有援用类型都是继承了Object的,所有说子类也能够拜访到Object上的办法如toString() 、valueOf() 等

这个时候咱们能够通过instanceof检测一下会发现

console.log(c instanceof Object)   //trueconsole.log(c instanceof Parent)   //trueconsole.log(c instanceof Child)    //true

然而,须要咱们留神一点的是,有的时候咱们须要在子类中增加新的办法或者是重写父类的办法时候,切记肯定要放到替换原型的语句之后

function Parent(){ this.x = 199; this.y = 299;}Parent.prototype.say = function(){ console.log('say')}function Child(){ this.g = 90;}/*在这里写子类的原型办法和属性是没用的,因为会扭转原型的指向,所以应该放到从新指定之后Child.prototype.Bs = function(){ console.log('Bs')}*/Child.prototype = new Parent();Child.prototype.constructor=Child//因为从新批改了Child的原型导致默认原型上的constructor失落,咱们须要本人增加上Child.prototype.Bs = function(){ console.log('Bs')}Child.prototype.say = function(){ console.log('之后改的')}var p = new Parent();var c = new Child();console.dir(c)c.Bs()  //Bsc.say()   // 之后改的p.say()  //say 不影响父类实例拜访父类的办法

原型继承的问题:

  • 子类继承父类的属性和办法是将父类的公有属性和私有办法都作为本人的私有属性和办法,咱们要分明一件事件就是咱们操作根本数据类型的时候操作的是值,在操作利用数据类型的时候操作的是地址,如果说父类的公有属性中援用类型的属性,那他被子类继承的时候会作为私有属性,这样子类一操作这个属性的时候,会影响到子类二。
  • 在创立子类的实例时,不能向父类型的构造函数中传递参数。应该说是没有方法在不影响所有对象实例的状况下,给父类的构造函数传递参数
所以在理论中很少独自应用原型继承

call继承

第二种继承是call继承,call办法的应用置信大家应该很相熟,将办法的this指向扭转同时执行办法。 在子类构造函数中 父类.call(this) 能够将父类的公有变成子类的公有

function Parent() { this.x = 100; this.y = 199;}Parent.prototype.fn = function() {}function Child() { this.d = 100; Parent.call(this); //构造函数中的this就是以后实例}var p = new Parent();var c = new Child();console.log(p)  //Parent {x: 100, y: 199}console.log(c)  //Child {d: 100, x: 100, y: 199}

这个是很好了解的,在子类的构造函数中,扭转父类的this指向,扭转为子类的实例,同时运行父类办法,这样父类中的this.x就变成了 子类的实例.x ,通过这种办法就能够继承了父类的公有属性,且只能继承父类的公有属性和办法。兴许你会问那我Parent.prototype.call(this) 不就能够继承父类的私有属性和办法么,我只能默默的说一句,call是Function的办法。

假冒对象继承

假冒对象继承的原理是循环遍历父类实例,而后父类实例的公有办法全副拿过去增加给子类实例

function Parent(){ this.x = 100;}Parent.prototype.getX = function(){ console.log('getX')}function Child(){ var p = new Parent(); for(var attr in p){//for in 能够遍历到原型上的私有自定义属性  this[attr] = p[attr] } //以下代码是只取得到公有办法和属性,如果不加这个的话就能够遍历到所有办法和属性 /*if(e.hasOwnProperty(attr)){  this[attr] = e[attr] } e.propertyIsEnumerable()*///可枚举属性==>  能够拿进去一一列举的属性}var p = new Parent();var c = new Child();console.dir(c)

这个就不过多解释了,重要的只有一点:for in 能够遍历到原型上的私有自定义属性 ,所以他能够拿到公有和私有的属性和办法,这个你能够遍历公有和私有的,须要你加限度条件。然而如果不做hasOwnProperty判断那么就是把父类的私有的和公有的都拿过去当公有的。

混合继承

混合继承,那就必定是混合的啦,将call继承和原型继承汇合在一起

无论是公有的还是私有的都拿过去了。然而有个问题就是子类的原型上的多了一套父类公有属性,然而不会产生问题。因为子类的公有属性也有一套雷同的通过call继承拿过去的

function Parent(){ this.x=100;}Parent.prototype.getX = function(){}function Child(){ Parent.call(this);}Child.prototype =  new Parent();Child.prototype.constructor = Child;var p = new Parent();var c = new Child();console.log(c)//Child {x: 100}

混合继承有多重形式,这种是call和原型混合的,你也能够call和假冒对象继承混合,等等,多种形式。具体应用就看本人的业务场景了。

这种混合继承的最大问题就是无论在什么状况下,都会调用两次构造函数:一次是在创立子类型原型的时候,另一次是在子类型构造函数的外部,没错,子类型最终会蕴含父类型对象的全副实例属性,但咱们不得不在调用子类构造函数时重写这些属性。

还有一种就是 call+拷贝继承

    //混合继承:call继承+拷贝继承    function extend(newEle,oldEle){        for(var attr in oldEle){            newEle[attr]=oldEle[attr];        }    }    function F(){        this.x=100;        this.showX=function(){}    }    F.prototype.getX=function(){};    F.prototype.getX1=function(){};    var f1=new F;    console.dir(f1)    function S(){        F.call(this)//call继承    }    extend(S.prototype, F.prototype);//拷贝继承    S.prototype.cc=function(){ }    var p1=new S;    console.dir(p1);
这种形式应用call继承将父类的公有办法继承过去,应用for in 拷贝 将父类的私有属性和办法继承过去,比拟实用。

中间件继承

中间件继承就是通过原型链的机制,子类的prototype.__proto__原本应该是间接指向Object.prototype。从父类的原型上的__proto__也能够到Object.prototype ==> 在父类.prototype上停留了下,父类.prototype就是一个中间件,所以子类能够继承到父类的私有办法当做本人的私有办法。

function Parent() {  this.x = 100;}Parent.prototype.getX = function() {};function Child() {}// 父级的原型对象 相当于一个跳板Child.prototype.__proto__ = Parent.prototype;var p = new Parent();var c = new Child();console.log(c);

寄生组合式继承

寄生式组合: call继承+Object.create()

所谓寄生组合式继承就是通过借用构造函数来继承属性,通过原型链的混合模式来继承办法。 基本思路是不用为了指定子类的原型而调用父类的构造函数,咱们所须要的无非就是父类型原型的一个正本而已。 实质上,就是应用寄生式继承父类的原型,而后再将后果指定给子类的原型。

所以咱们就新建一个办法

function inheritPrototype(subType,superType){ var prototype = Object.create(superType.prototype);//创建对象 prototype.constructor = subType;//加强对象 subType.prototype = prototype;//指定对象}

解释一下:

1、第一步是创立父类型原型的一个正本。

2、第二步是为创立的正本减少constructor属性,从而补救了因为重写原型而失去的默认的constructor属性。

3、第三步是将创立的对象赋值给子类型的原型。

function F() {  this.x = 100;}F.prototype.showX = function() {};function S() {  this.y = 200;  F.call(this); //只继承了公有的;}function inheritPrototype(subType, superType) {  var prototype = Object(superType.prototype); //创建对象  prototype.constructor = subType; //加强对象  subType.prototype = prototype; //指定对象}inheritPrototype(S, F);var p1 = new S();console.dir(p1);

经典继承(道格拉斯继承)

与下面的大同小异,已知一个对象o,须要创立一个新的对象,这个新的对象继承自对象o。

//性能封装function create(o) {    function F(){}    F.prototype=o;    return new F(); }var o={name:"张三",age:18};var o2=create(o);//这样o2就继承自o了

以上是 ES5局部的继承

ES6的继承

es6的继承次要要留神的是class的继承

  • 根本用法:Class之间通过应用extends关键字,这比通过批改原型链实现继承,要不便清晰很多

举例:

class Super {  constructor(){    this.sup = 'super????????'  }  superFun(){    console.log('父-function')  }}class Sub extends Super{  constructor(){    super()    this.name = 'sub????????'  }  subFun(){    super.superFun()    console.log('subFun');  }}let p = new Sub()

子类必须要在construct 中 调用super办法,否则新建实例的时候会报错。

因为子类没有本人的this对象,而是继承父类的this对象,只能通过super() 这种形式。

super 关键字:既是函数 也是对象

它作为函数,是父类的构造函数,只能在子类的构造函数里用,然而应用环境是子类,相当于在子类的环境中,调用父类的构造函数。sub继承Super,sub外面用的super()相当于以下代码

Super.prototype.constructor.call(this);//这里的this是sub的this

它作为对象,在一般过的办法中(非构造方法,非静态方法),或指向父类的原型对象,能够应用super.fun() 的办法调用。然而,父类的属性(this.xxx)是不能被子类以super.xxx的模式进行拜访的。 因为这些属性是父类实例的属性,不是父类的属性。只有写成this.prototype.xxx 才属于父类,而不是实例。

它作为对象,在静态方法里,是父类自身。所以能够调用父类自身的动态函数。

ES6规定,通过super.someFunction()调用父类的办法时,环境肯定是子类的this,这样我感觉不会乱。打个比方,在子类里写 super.someValue,就相当于写到this.someValue里了,再去读super.someValue的时候,就读不到刚刚设置的那个值了,我感觉是因为ES6只拦挡了对super的写操作,把所有写操作都挪到子类的this环境里了,然而读操作还是会走到父类里,所以读super.someValue,相当于读 A.prototype.someValue,父类的值。

ES5 和 ES6 的继承的区别

ES5不能继承原生构造函数,起因是它先建设子类实例,再往里加父类的属性,原生构造函数(Array)什么的,有外部属性,不让读,所以不行。ES6比拟机智,先建设父类的实例,放子类的this上,再执行子类的构造函数,所以能够继承。

记忆模式

整顿一些简略的文字描述,疾速记住所有的形式

原型继承

形式:子类.prototype = 父类的实例。

成果:父(公私)-> 子(公)

call继承

形式:子类中执行 父类.call(this)

成果:父(私)-> 子(私)

假冒对象继承

形式:子类中执行 for in 循环父类的实例

成果:父(公私) -> 子(私)

for in 循环比拟灵便,能够循环实例:也能够应用 hasOwnProperty 来进行私有的过滤;能够循环父类的prototype 增加到子类的prototype上。

混合继承

形式:就是前几个随便组合呗,看本人的业务状况

中间件继承

形式:子类.prototype.proto = 父类.prototype;

成果:父(公)-> 子(公)

寄生组合式继承

形式:call + Object.create()

成果:父(私公) -> 子(公私)