js高程(二)-----继承

时间：2021-04-03 21:25:21

首先来讨论一下原型链，上代码

 function SuperType(){

     this.property = true;

   }

   SuperType.prototype.getSuperValue = function(){

     console.log(this.property);

   }

   function SubType(){

     this.subproperty = false;

   }

   SubType.prototype = new SuperType();

   SubType.prototype.getSubValue = function(){

     console.log(this.subproperty);

   }

   var instance = new SubType();

   console.log(instance.getSuperValue());//true

前三行创建了一个名为SuperType的构造器，并为其添加了一个属性propertype，其值设为true，然后在SuperType的原型上添加方法getSuperValue，功能是输出属性property的值，第一个构造函数完毕。9到11行创建第二个构造函数并添加属性subproperty，其值设为false。重点部分：第13行，把一个SuperType的实例赋值给SubType的原型。后面同样为SubType的原型添加一个方法。然后创建一个Subtype的实例，调用getSuperValue方法，返回true。

下面来仔细分析一下这条原型链，首先创造一个构造函数SuperType，它指向自己的原型，而原型的constructor有指向SuperType，这是第一部分，第二次创造了新的构造函数SubType，它的实例instance指向它的原型，而它的原型已经被设定为一个SuperType的实例，而这个实例又指向SuperType的原型，所以这部分和刚刚的第一部分就联系起来了，问题来了，instance。constructor是谁？沿着刚刚说的原型链向上找，

console.log(instance.constructor);//SuperType

同理，SuperType其实还能沿着原型链向上，上面就是Object。

第二种：借用构造函数，上代码：

 function SuperType(name){

     this.name = name;

   }

   function SubType(){

     SuperType.call(this,"jiangjie");

     this.age = 20;

   }

   var instance = new SubType();

   console.log(instance.name);//jiangjie

   console.log(instance.age);//

   console.log(instance.constructor);//Subtype

   console.log(Object.getPrototypeOf(instance)==SubType.prototype);//true

   console.log(instance.hasOwnProperty("name"));//true

这样的写法就更容易理解了，使用call只是使用了Supertype的属性，但是并没有改动任何的原型链，我们可以使用hasOwnProperty来证明并不是调用了SuperType作为原型，

第三种：组合继承，上代码

 function SuperType(name){

     this.color = ['red','black','white'];

     this.name = name;

   }

   SuperType.prototype.sayName = function(){

     console.log(this.name);

   }

   function SubType(name,age){

     SuperType.call(this,name);

     this.age = age;

   }

   SubType.prototype = new SuperType();

   SubType.prototype.sayAge = function(){

     console.log(this.age);

   }

   var instance1 = new SubType('jaingjie','20');

   var instance2 = new SubType('lukexin','20');

   instance1.color.push('green');

   console.log(instance1.color);//['red','black','white','green'];

   console.log(instance1.sayName());//jiangjie

   console.log(instance1.sayAge());//

   console.log(instance2.color);//['red','black','white'];

   console.log(instance2.sayName());//lukexin

   console.log(instance2.sayAge());//

说白了就是改进版，集中各个方法所长，使用 借用构造函数 方法，来设定各自实例属性，通过原型来设定通用的方法，但是要注意，为了确保构造函数不会重写子类的属性，要在调用超类型构造函数以后，再为子类添加属性

相关文章