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 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
Javascript图像处理思路及实现代码
Dec 25 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
小程序实现录音功能
Sep 22 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 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
我的论坛源代码(四)
2006/10/09 PHP
php编写一个简单的路由类
2011/04/13 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
Python补齐字符串长度的实例
2018/11/15 Python
OpenCV 边缘检测
2019/07/10 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
C语言面试题
2015/10/30 面试题
安全保证书范文
2014/04/29 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
大学活动总结模板
2014/07/10 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
JS Object构造函数之Object.freeze
2021/04/28 Javascript
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
Python 可迭代对象 iterable的具体使用
2021/08/07 Python