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 相关文章推荐
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
jQuery Mobile 导航栏代码
Nov 01 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 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中数组首字符过滤功能代码
2012/07/31 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
教你安装python Django(图文)
2013/11/04 Python
Python转换HTML到Text纯文本的方法
2015/01/15 Python
python实现端口转发器的方法
2015/03/13 Python
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
python将unicode转为str的方法
2017/06/21 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
Vrbo英国:预订度假屋
2020/08/19 全球购物
生态学毕业生自荐信
2013/10/27 职场文书
某某同志考察材料
2014/05/28 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL
纯html+css实现打字效果
2021/08/02 HTML / CSS
vue实力踩坑之push当前页无效
2022/04/10 Vue.js