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 object array方法使用详解
Dec 03 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
JavaScript数组迭代方法
Mar 03 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 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
PHP+MYSQL的文章管理系统(一)
2006/10/09 PHP
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
PHP在线书签系统分享
2016/01/04 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
js实现日期级联效果
2014/01/23 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
python利用不到一百行代码实现一个小siri
2017/03/02 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
台湾三立电视电商平台:电电购
2019/09/09 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
初中生期末评语大全
2014/04/24 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
企业法人代表证明书
2015/06/18 职场文书
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers
Redis如何实现分布式锁
2021/08/23 Redis
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers