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 相关文章推荐
JavaScript中switch判断容易犯错的一个细节
Aug 27 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
JavaScript闭包详解
Feb 02 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
JavaScript中set与get方法用法示例
Aug 15 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
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
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
axios基本入门用法教程
2017/03/25 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
Angular中的$watch方法详解
2017/09/18 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
浅谈Python中的bs4基础
2018/10/21 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
Python模块的制作方法实例分析
2019/12/21 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
秘书专业自荐信范文
2013/12/26 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
班主任对学生的评语
2014/04/26 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
电台广播稿范文
2015/08/19 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python