浅谈JS继承_借用构造函数 & 组合式继承

2.借用构造函数

解决原型中包含引用类型值所带来的问题, 我们使用一种叫做 借用构造函数(constructor stealing)的技术(又叫伪造对象或经典继承)。

这种技术的基本思想:在子类构造函数内部调用超类型构造函数

通过使用apply()和call()方法可以在新创建的子类对象上执行构造函数

rush:js;"> function SuperType(){ this.colors = ["red","blue","green"]; }

function SubType(){
//继承了 SuperType
SuperType.apply(this);
}

var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //red,blue,green,black

var instance2 = new SubType();
alert(instance2.colors); //red,green

在上述例子中,实际上是在新创建的SubType实例(instance1 instance2)的环境下调用了SuperType的构造函数。这样一来,就会在新SubType对象上执行SuperType()函数中定义的所有对象初始化代码。 所以Subtype的每个实例就都会具有自己的colors属性的副本了。

传递参数

对于原型链来讲,借用构造函数一个很大的优势,即可以在子类型构造函数中想超类型构造函数传递参数。

rush:js;"> function SuperType(name){ this.name = name; }

function SubType(){
SuperType.call(this,"Bob");
this.age = 18;
}

var instance1 = new SubType();
alert(instance1.age); //18
alert(instance1.name); //Bob

借用构造函数的问题:

方法都在构造函数中定义,因此函数复用就无从谈起了。而且,在超类型的原型中定义的方法,对子类型而言也是不可见的。

3. 组合继承

组合继承(combination inheritance),有时候也叫作伪经典继承, 指的是将原型链和借用构造函数的技术组合到一起。从而发挥二者之长的一种继承模式。

使用原型链实现对原型属性方法的继承;

通过借用构造函数来实现对实例属性的继承。

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

rush:js;"> function SuperType(name){ this.name = name; this.colors = ["red","green"]; } SuperType.prototype.sayName = function(){ alert(this.name); }

function SubType(name,age){
    //继承属性
SuperType.call(this,name);
this.age = age;
}

  //继承方法
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function(){
alert(this.age);
}

var instance1 = new SubType("Bob",22);
instance1.colors.push("black");
alert(instance1.colors); //red,black
instance1.sayName(); //Bob
instance1.sayAge(); //22

var instance2 = new SubType("Alice",21);
alert(instance2.colors); //red,green
instance2.sayName(); //Alice
instance2.sayAge(); //21

在这个例子中, SuperType构造函数定义了两个属性: name和colors。 SuperType的原型定义了一个方法sayName()。

SubType构造函数调用SuperType构造函数时传入了name参数,定义了他自己的属性age。然后将SuperType的实例赋值给SubType的原型。在该原型上定义了方法sayAge()。

这样一来,就可以让两个不同的SubType实例既分别拥有自己的属性 - 包括colors属性,又可以使用相同的方法

以上这篇浅谈JS继承_借用构造函数 & 组合式继承就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...