JS继承之借用构造函数继承和组合继承

 更新时间:2021年11月04日 15:57:05   投稿:lijiao  
这篇文章主要为大家详细介绍了JS继承之借用构造函数继承和组合继承,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

借用构造函数继承

在解决原型中包含引用类型值所带来问题的过程中,开发人员开始使用一种叫做借用构造函数(constructor stealing)的技术(有时候也叫做伪造对象或经典继承)。这种技术的基本思想相当简单,即在子类型构造函数的内部调用超类型构造函数。

基本模式

function SuperType(){
 this.colors = ["red", "blue", "green"];
}
function SubType(){
  //继承了SuperType
 SuperType.call(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" 

基本思想

借用构造函数的基本思想就是利用call或者apply把父类中通过this指定的属性和方法复制(借用)到子类创建的实例中。因为this对象是在运行时基于函数的执行环境绑定的。也就是说,在全局中,this等于window,而当函数被作为某个对象的方法调用时,this等于那个对象。call 、apply方法可以用来代替另一个对象调用一个方法。call、apply 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

所以,这个借用构造函数就是,new对象的时候(注意,new操作符与直接调用是不同的,以函数的方式直接调用的时候,this指向window,new创建的时候,this指向创建的这个实例),创建了一个新的实例对象,并且执行SubType里面的代码,而SubType里面用call调用了SuperTyep,也就是说把this指向改成了指向新的实例,所以就会把SuperType里面的this相关属性和方法赋值到新的实例上,而不是赋值到SupType上面。所有实例中就拥有了父类定义的这些this的属性和方法。

优势

相对于原型链而言,借用构造函数有一个很大的优势,即可以在子类型构造函数中向超类型构造函数传递参数。因为属性是绑定到this上面的,所以调用的时候才赋到相应的实例中,各个实例的值就不会互相影响了。

例如:

function SuperType(name){
this.name = name;
}
function SubType(){
//继承了SuperType,同时还传递了参数
SuperType.call(this, "Nicholas");
//实例属性
this.age = 29;
}
var instance = new SubType();
alert(instance.name); //"Nicholas";
alert(instance.age); //29 

劣势

如果仅仅是借用构造函数,那么也将无法避免构造函数模式存在的问题——方法都在构造函数中定义,因此函数复用就无从谈起了。而且,在超类型的原型中定义的方法,对子类型而言也是不可见的,结果所有类型都只能使用构造函数模式。考虑到这些问题,借用构造函数的技术也是很少单独使用的。 

组合继承

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

基本思想

思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。

基本模型

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.constructor = SubType;
SubType.prototype.sayAge = function(){
alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27 

优势

组合继承避免了原型链和借用构造函数的缺陷,融合了它们的优点,成为JavaScript 中最常用的继承模式。

劣势

组合继承最大的问题就是无论什么情况下,都会调用两次超类型构造函数:一次是在创建子类型原型的时候,另一次是在子类型构造函数内部。虽然子类型最终会包含超类型对象的全部实例属性,但我们不得不在调用子类型构造函数时重写这些属性。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 利用JavaScript做数独的完整实现过程

    利用JavaScript做数独的完整实现过程

    数独游戏是在一个9*9的方格中进行填数字的游戏,需要满足的规则是每行每列和每个子九宫格都是1~9的不重复数字,下面这篇文章主要给大家介绍了关于如何利用JavaScript做数独的相关资料,需要的朋友可以参考下
    2021-09-09
  • JavaScript监听键盘事件代码实现

    JavaScript监听键盘事件代码实现

    这篇文章主要介绍了JavaScript监听键盘事件代码实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • 在javascript中,null>=0 为真,null==0却为假,null的值详解

    在javascript中,null>=0 为真,null==0却为假,null的值详解

    这篇文章主要介绍了在javascript中,null>=0 为真,null==0却为假,null的值详解的相关资料,需要的朋友可以参考下
    2017-02-02
  • javawscript 三级菜单的实现原理

    javawscript 三级菜单的实现原理

    javawscript 三级菜单的实现代码。
    2009-07-07
  • js+div实现图片滚动效果代码

    js+div实现图片滚动效果代码

    本篇文章主要是对js+div实现图片滚动效果的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • layer扩展打开/关闭动画的方法

    layer扩展打开/关闭动画的方法

    今天小编就为大家分享一篇layer扩展打开/关闭动画的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JSONP跨域模拟百度搜索

    JSONP跨域模拟百度搜索

    这篇文章主要介绍了JSONP跨域模拟百度搜索,JSONP是JSON with padding 的简写,应用JSON的一种新方法,在后来的Web服务中非常流行,JSONP看起来与JSON差不多,只不过是被包含在函数中调用的JSON,对此感兴趣的小伙伴可以参考一下下面文章内容
    2021-12-12
  • 微信小程序基于Taro的分享图片功能实践详解

    微信小程序基于Taro的分享图片功能实践详解

    这篇文章主要介绍了微信小程序基于Taro的分享图片功能实践详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • javascript日期计算实例分析

    javascript日期计算实例分析

    这篇文章主要介绍了javascript日期计算,涉及javascript针对日期计算的相关技巧,这里需要注意索引的使用,需要的朋友可以参考下
    2015-06-06
  • Javascript异步编程模型Promise模式详细介绍

    Javascript异步编程模型Promise模式详细介绍

    异步模式在 Web 编程中变得越来越重要,如何处理异步请求后的操作是一件麻烦事。Promise 是一种异步编程模型,术语称作 Deferred 模式,它通过一组API来规范化异步操作,让异步操作的流程控制更加容易。
    2014-05-05

最新评论