JavaScript如何借用构造函数继承

 更新时间:2019年11月06日 15:43:23   作者:好多坨屎  
这篇文章主要介绍了JavaScript如何借用构造函数继承,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

这篇文章主要介绍了JavaScript如何借用构造函数继承,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

借用构造函数继承是在子类型构造函数的内部调用超类型构造函数,通过使用apply()和call()方法

function girlFriend(){
    this.girls = ['chen','wang','zhu'];
  }
  function Person(){
    girlFriend.call(this,20);
  }
  var wang = new Person();
  var zhu = new Person();
  wang.girls.push('zhang');
  console.log(wang.girls);  //(4) ["chen", "wang", "zhu", "zhang"]
  console.log(zhu.girls);    //(3) ["chen", "wang", "zhu"]

通过以上代码,我们可以发现,在原型链继承中出现的问题不再出现了,这个超类不会被子类所创建的实例共享了。

借用构造函数继承的优势是可以在子类型构造函数中向超类型构造函数传递参数,例如以下代码:

function SuperType(name){
    this.name = name;
  }
  function SubType(){
    SuperType.call(this,"nick");
    this.age = 20;
  }
  var instance = new SubType();
  console.log(instance.name);    //nick
  console.log(instance.age);    //20

借用构造函数继承的问题:用构造函数继承并不能继承到超类型原型中定义的方法,例如以下代码,在girlFriends构造函数的原型中添加sayHello方法:

girlFriend.prototype.sayHello = function(){
    console.log('hello');
  }

继承它的子类构造函数的实例并不能调用到这个sayHello方法,返回的值是undefined

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

相关文章

  • 谈谈JavaScript中的垃圾回收机制

    谈谈JavaScript中的垃圾回收机制

    这篇文章主要介绍了JavaScript中的垃圾回收机制,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下
    2020-09-09
  • javascript高级编程之函数表达式 递归和闭包函数

    javascript高级编程之函数表达式 递归和闭包函数

    这篇文章主要介绍了javascript高级编程之函数表达式 递归和闭包函数的相关资料,需要的朋友可以参考下
    2015-11-11
  • JS实现黑色大气的二级导航菜单效果

    JS实现黑色大气的二级导航菜单效果

    这篇文章主要介绍了JS实现黑色大气的二级导航菜单效果,具有延迟响应鼠标事件显示切换效果的功能,非常简单实用,需要的朋友可以参考下
    2015-09-09
  • javascript+css实现俄罗斯方块小游戏

    javascript+css实现俄罗斯方块小游戏

    这篇文章主要为大家详细介绍了javascript+css实现俄罗斯方块小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 新手快速入门JavaScript装饰者模式与AOP

    新手快速入门JavaScript装饰者模式与AOP

    这篇文章主要介绍了新手快速入门JavaScript装饰者模式与AOP,在不改变对象)的情况下动态的为其添加功能,这就是装饰者模式,下面小编带大家来深入学习一下吧
    2019-06-06
  • 基于JavaScript实现自定义滚动条

    基于JavaScript实现自定义滚动条

    这篇文章主要为大家详细介绍了基于JavaScript实现自定义滚动条,可以直接使用的滚动条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • JavaScript实现自动变换表格边框颜色

    JavaScript实现自动变换表格边框颜色

    用JavaScript控制表格边框不停的变换颜色,记得以前经常看到这种效果,代码也不复杂,直接复制就可用啦! 可自定义颜色,有需要的小伙伴可以参考下。
    2015-05-05
  • JS中mouseup事件丢失的原因与解决办法

    JS中mouseup事件丢失的原因与解决办法

    这篇文章主要跟大家介绍了关于Javascript中mouseup事件丢失的原因与解决办法的相关资料,文中给出详细的示例代码供大家参考学习,需要的朋友们下面跟着小编一起来学习学习吧。
    2017-06-06
  • bootstrap与pagehelper实现分页效果

    bootstrap与pagehelper实现分页效果

    这篇文章主要为大家详细介绍了bootstrap与pagehelper实现分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 深入学习JavaScript对象

    深入学习JavaScript对象

    今天小编就和大家深入学习JavaScript对象,感兴趣的小伙伴们可以参考一下,大家一起学习。
    2015-10-10

最新评论