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 相关文章推荐
IE7提供XMLHttpRequest对象为兼容
Mar 08 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 Javascript
vue点击当前路由高亮小案例
Sep 26 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/14 PHP
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
JS轮播图实现简单代码
2021/02/19 Javascript
webpack3之loader全解析
2017/10/26 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
js实现点击烟花特效
2020/10/14 Javascript
跟老齐学Python之for循环语句
2014/10/02 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
Python 基础之字符串string详解及实例
2017/04/01 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
python3 读取Excel表格中的数据
2018/10/16 Python
selenium+python环境配置教程详解
2019/05/28 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
abstract class和interface有什么区别
2013/08/04 面试题
小学综治宣传月活动总结
2014/07/02 职场文书
销售工作决心书
2015/02/04 职场文书
2015年医院工作总结范文
2015/04/09 职场文书
我爱我班主题班会
2015/08/13 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL