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 相关文章推荐
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
JS 树形递归实例代码
May 18 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
jquery中为什么能用$操作
Jun 18 jQuery
在博客园博文中添加自定义右键菜单的方法详解
Feb 05 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 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
无线电广播的开始
2002/01/30 无线电
Smarty+QUICKFORM小小演示
2007/02/25 PHP
一个PHP的String类代码
2010/04/20 PHP
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
python测试驱动开发实例
2014/10/08 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
使用python去除图片白色像素的实例
2019/12/12 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
python网络编程之五子棋游戏
2020/05/14 Python
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
入学申请自荐信范文
2014/02/26 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
Python requests用法和django后台处理详解
2022/03/19 Python
Github 使用python对copilot做些简单使用测试
2022/04/14 Python
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android