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 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
tbody元素支持嵌套的注意方法
Mar 24 Javascript
Prototype Hash对象 学习
Jul 19 Javascript
javascript实现tab切换特效
Nov 12 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
详解webpack介绍&安装&常用命令
Jun 29 Javascript
webpack配置sass模块的加载的方法
Jul 30 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
php 表单数据的获取代码
2009/03/10 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
JavaScript 继承详解(四)
2009/07/13 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
原生js封装的ajax方法示例
2018/08/02 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
幼儿教育感言
2014/02/05 职场文书
村委会换届选举方案
2014/05/03 职场文书
岗位说明书标准范本
2014/07/30 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
运动会开幕词
2015/01/28 职场文书
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python