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 相关文章推荐
漂亮的仿flash菜单,来自蓝色经典
Jun 26 Javascript
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
node.js中使用node-schedule实现定时任务实例
Jun 03 Javascript
JavaScript中的比较操作符>、=、
Dec 31 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
Vue 请求传公共参数的操作
Jul 31 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
第一个无线电台是由谁发明的
2021/03/01 无线电
提升PHP执行速度全攻略(下)
2006/10/09 PHP
?繁体转换的class
2006/10/09 PHP
PHP strtr() 函数使用说明
2008/11/21 PHP
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
js获取单选框或复选框值及操作
2012/12/18 Javascript
js导出txt示例代码
2014/01/14 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
JavaScript知识点整理
2015/12/09 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
python解析文件示例
2014/01/23 Python
Python制作钉钉加密/解密工具
2016/12/07 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
django settings.py 配置文件及介绍
2019/07/15 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
NULL是什么,它是怎么定义的
2015/05/09 面试题
心得体会怎么写
2013/12/30 职场文书
学生自我评价范文
2014/02/02 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
岗位说明书范文
2014/05/07 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
Java版 单机五子棋
2022/05/04 Java/Android