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 相关文章推荐
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
详解JavaScript函数对象
Nov 15 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
JavaScript两种计时器的实例讲解
Jan 31 Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
JS定时器实例详细分析
2013/10/11 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
python 从远程服务器下载日志文件的程序
2013/02/10 Python
python如何通过protobuf实现rpc
2016/03/06 Python
python如何获取服务器硬件信息
2017/05/11 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
Python定义一个Actor任务
2020/07/29 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
商务助理岗位职责
2013/11/13 职场文书
家庭困难证明
2014/10/12 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
男人帮观后感
2015/06/18 职场文书
迎国庆主题班会
2015/08/17 职场文书
社会实践心得体会范文
2016/01/14 职场文书
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis