javascript原型链学习记录之继承实现方式分析


Posted in Javascript onMay 01, 2019

本文实例讲述了javascript原型链学习记录之继承实现方式。分享给大家供大家参考,具体如下:

在慕课网学习继承的笔记:

继承的几种方式:

① 使用构造函数实现继承

function Parent(){
  this.name = 'parent';
}
function Child(){
Parent.call(this); //在子类函数体里面执行父类的构造函数
this.type = 'child';//子类自己的属性
}

Parent.call(this),this即实例,使用this执行Parent方法,那么就用this.name = 'parent'把属性

挂载在了this(实例)上面,以此实现了继承。

缺点:以上只是让Child得到了Parent上的属性,Parent的原型链上的属性并未被继承。

② 使用原型链实现继承

function Parent(){
  this.name = 'parent';
}
function Child(){
  this.type = 'child';
}
Child.prototype = new Parent();

解释:Child.prototype === Chlid实例的__proto__ === Child实例的原型

所以当我们引用new Child().name时,Child上没有,然后寻找Child的原型child.__proto__Child.prototypenew Parent(),Parent的实例上就有name属性,所以Child实例就在原型链上找到了name属性,以此实现了继承。

缺点:可以看出,Child的所有实例,它们的原型都是同一个,即Parent的实例:

var a = new Child();
var b = new Child();
a.__proto === b.__proto__; //true

所以,当使用 a.name = 'a'重新给name赋值时,b.name也变成了'a',反之亦然。

用instanceof和constructor都无法确认实例到底是Child的还是Parent的。

③ 结合前两种取长补短

function Parent(){
  this.name = 'parent';
}
function Child(){
  Parent.call(this);
  this.type = 'child';
}
Child.prototype = new Parent();

缺点:在Child()里面用Parent.call(this);执行了一次Parent(),然后又使用Child.prototype = new Parent()执行了一次Parent()。

改进1:

function Parent(){
  this.name = 'parent';
}
function Child(){
  Parent.call(this);
  this.type = 'child';
}
Child.prototype = Parent.prototype;

缺点:用instanceof和constructor都无法确认实例到底是Child的还是Parent的。

原因: Child.prototype = Parent.prototype直接从Parent.prototype里面拿到constructor,即Parent。

改进2:

function Parent(){
  this.name = 'parent';
}
function Child(){
  Parent.call(this);
  this.type = 'child';
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

画图说明吧:

var a = new Child();

javascript原型链学习记录之继承实现方式分析

所以这样写我们就构造出了原型链。

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript执行效率与性能提升方案
Dec 21 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
js中定义一个变量并判断其是否为空的方法
May 13 Javascript
js查找节点的方法小结
Jan 13 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
利用CDN加速react webpack打包后的文件详解
Feb 22 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
原生JS与JQ获取元素的区别详解
Feb 13 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 #Javascript
微信小程序常见页面跳转操作简单示例
May 01 #Javascript
浅谈对于react-thunk中间件的简单理解
May 01 #Javascript
vue增加强缓存和版本号的实现方法
May 01 #Javascript
vue组件化中slot的基本使用方法
May 01 #Javascript
Vue基本使用之对象提供的属性功能
Apr 30 #Javascript
原生JS实现随机点名项目的实例代码
Apr 30 #Javascript
You might like
apache rewrite_module模块使用教程
2008/01/10 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
将python安装信息加入注册表的示例
2019/11/20 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
python 如何区分return和yield
2020/09/22 Python
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
教师岗位职责范本
2013/12/29 职场文书
出纳工作检讨书
2014/10/18 职场文书
2015新年寄语大全
2014/12/08 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
葬礼主持词
2015/07/02 职场文书
科普 | 业余无线电知识-波段篇
2022/02/18 无线电
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android
MySQL创建管理RANGE分区
2022/04/13 MySQL
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL
vue里使用create, mounted调用方法
2022/04/26 Vue.js