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 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
React根据宽度自适应高度的示例代码
Oct 11 Javascript
vue 的keep-alive缓存功能的实现
Mar 22 Javascript
Webpack的dll功能使用
Jun 28 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 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
session 的生命周期是多长
2006/10/09 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
PHP使用函数用法详解
2018/09/30 PHP
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
深入学习Python中的装饰器使用
2016/06/20 Python
flask入门之表单的实现
2018/07/18 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
酒店人事专员岗位职责
2013/12/19 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
白酒市场营销方案
2014/02/25 职场文书
师范类求职信
2014/06/21 职场文书
找工作求职信
2014/07/07 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
Django如何创作一个简单的最小程序
2021/05/12 Python
SQL Server实现分页方法介绍
2022/03/16 SQL Server
Mysql中mvcc各场景理解应用
2022/08/05 MySQL