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 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
Aug 11 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
JS块级作用域和私有变量实例分析
May 11 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
微信小程序实现卡片左右滑动效果的示例代码
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
也谈截取首页新闻 - 范例
2006/10/09 PHP
使用php4加速网络传输
2006/10/09 PHP
PHP的加密方式及原理
2012/06/14 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
javascript 网页跳转的方法
2008/12/24 Javascript
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
Python使用django获取用户IP地址的方法
2015/05/11 Python
python模块之paramiko实例代码
2018/01/31 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
个人找工作求职简历的自我评价
2013/10/20 职场文书
大学在校生求职信范文
2013/11/21 职场文书
岗位职责风险点
2014/03/12 职场文书
物理学专业求职信
2014/07/04 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
公司辞职信模板
2015/05/13 职场文书
大学生见习总结报告
2015/06/24 职场文书