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根据日期判断星座的示例代码
Jan 23 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
javascript闭包的理解
Apr 01 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 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
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
Python 文件管理实例详解
2015/11/10 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
Django在Model保存前记录日志实例
2020/05/14 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
教育技术学专业职业规划书
2014/03/03 职场文书
教室布置标语
2014/06/26 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
2014年护理部工作总结
2014/11/14 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
高一作文之暖冬
2019/11/09 职场文书