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 相关文章推荐
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
对比分析json及XML
Nov 28 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
微信小程序中target和currentTarget的区别小结
Nov 06 Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 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
php 过滤器实现代码
2010/08/09 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
让python json encode datetime类型
2010/12/28 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
Python实现自动访问网页的例子
2020/02/21 Python
python如何变换环境
2020/07/21 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
自我评价格式
2014/01/06 职场文书
英语教学随笔感言
2014/02/20 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
保卫工作个人总结
2015/03/03 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android