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 相关文章推荐
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
javascript三种代码注释方法
Jun 02 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
详解vue表单——小白速看
Apr 08 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 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 curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
python递归计算N!的方法
2015/05/05 Python
详解Python字符串对象的实现
2015/12/24 Python
Python中的字符串替换操作示例
2016/06/27 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
简单了解python代码优化小技巧
2019/07/08 Python
实例详解Python装饰器与闭包
2019/07/29 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
行政经理的岗位职责
2013/11/23 职场文书
关于工资低的辞职信
2014/01/14 职场文书
历史博物馆观后感
2015/06/05 职场文书
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS