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 相关文章推荐
js传值 判断
Oct 26 Javascript
用js得到网页中所有的div的id
Oct 19 Javascript
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 Javascript
10分钟学会js处理json的常用方法
Dec 06 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代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
2018/05/09 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
vue实现文字加密功能
2019/09/27 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
pandas的排序和排名的具体使用
2019/07/31 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
Python常用断言函数实例汇总
2020/11/30 Python
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
J2EE包括哪些技术
2016/11/25 面试题
师范生实习自我鉴定
2013/11/01 职场文书
车间安全生产标语
2014/06/06 职场文书
学校周年庆活动方案
2014/08/22 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL
javascript对象3个属性特征
2021/11/17 Javascript