JavaScript如何借用构造函数继承


Posted in Javascript onNovember 06, 2019

这篇文章主要介绍了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 相关文章推荐
JS JavaScript获取Url参数,src属性参数
Mar 09 Javascript
Firefox div高度自适应
Apr 28 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
一些实用性较高的js方法
Apr 19 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 #Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 #Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 #Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 #Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 #Javascript
vue点击页面空白处实现保存功能
Nov 06 #Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 #Javascript
You might like
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
python装饰器decorator介绍
2014/11/21 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
python实现批量文件重命名
2019/10/31 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
iostream与iostream.h的区别
2015/01/16 面试题
公积金转移接收函
2014/01/11 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
市场部经理岗位职责
2015/02/02 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
仙境之桥观后感
2015/06/16 职场文书
2015年高中语文教学总结
2015/08/18 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python
Nginx源码编译安装过程记录
2021/11/17 Servers