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

所属分类: 网络编程 / JavaScript 阅读数: 736
收藏 0 赞 0 分享

2.借用构造函数

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

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

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

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,blue,green

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

传递参数

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

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

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

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

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

function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "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,blue,green,black
instance1.sayName();     //Bob
instance1.sayAge();     //22

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

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

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

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

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

更多精彩内容其他人还在看

Angular使用Md5加密的解决方法

这篇文章主要介绍了Angular使用Md5加密的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

详解JS构造函数中this和return

本文通过实例代码给大家介绍了JS构造函数中this和return,需要的朋友参考下吧
收藏 0 赞 0 分享

ES6中Array.find()和findIndex()函数的用法详解

ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧
收藏 0 赞 0 分享

JS闭包的几种常见形式实例详解

本文通过实例代码给大家详细介绍了js闭包的几种常见形式,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
收藏 0 赞 0 分享

ES6中Array.copyWithin()函数的用法实例详解

ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的朋友参考下
收藏 0 赞 0 分享

Javascript 严格模式use strict详解

严格模式:由ECMA-262规范定义的JavaScript标准,对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下
收藏 0 赞 0 分享

引入JavaScript时alert弹出框显示中文乱码问题

今天在HTML中引入JavaScript文件运行时,alert弹出的提示框中文显示为乱码,怎么解决此问题呢?下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法,一起看看吧
收藏 0 赞 0 分享

AngularJs 延时器、计时器实例代码

这篇文章主要介绍了AngularJs 延时器、计时器实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

JS分页的实现(同步与异步)

这篇文章主要介绍了JS分页的实现(同步与异步),需要的朋友可以参考下
收藏 0 赞 0 分享

Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能,下面小编把实例demo分享到脚本之家平台,需要的朋友参考下
收藏 0 赞 0 分享
查看更多