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读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
$.each与$().each的区别示例介绍
Mar 20 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
node.js中的console.error方法使用说明
Dec 10 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
简单实现JS计算器功能
Dec 21 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
React配置子路由的实现
Jun 03 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强制下载文件函数
2016/08/24 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
PHP实现文件上传与下载
2020/08/28 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
python 杀死自身进程的实现方法
2019/07/01 Python
PYTHON绘制雷达图代码实例
2019/10/15 Python
python实现文法左递归的消除方法
2020/05/22 Python
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
有个性的自我评价范文
2013/11/15 职场文书
营销总经理的岗位职责
2013/12/15 职场文书
生日寄语大全
2014/04/08 职场文书
自我推荐信范文
2014/05/09 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
天下第一关导游词
2015/02/06 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python
python神经网络ResNet50模型
2022/05/06 Python
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS
Python中的socket网络模块介绍
2022/07/23 Python