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 相关文章推荐
jquery 获取json数据实现代码
Apr 27 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 Javascript
uni-app实现点赞评论功能
Nov 25 Javascript
JavaScript常用工具函数库汇总
Sep 17 Javascript
JavaScript canvas实现文字时钟
Jan 10 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 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
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
JavaScript的document对象和window对象详解
2010/12/30 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
python 表格打印代码实例解析
2019/10/12 Python
python滑块验证码的破解实现
2019/11/10 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
如何写出高性能的JSP和Servlet
2013/01/22 面试题
软件配置管理有什么好处
2015/04/15 面试题
项目管理计划书
2014/01/09 职场文书
宣传工作经验材料
2014/06/02 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
2015年环卫工作总结
2015/04/28 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
Python Pygame实战之塔防游戏的实现
2022/03/17 Python
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers