浅谈JavaScript继承
前言
关于JavaScript继承相关的定义和方法网上已经有很多解释啦,本菜鸟就不抄抄写写惹人嫌了,本文主要探讨三种基本的继承方式并且给出优化方案。
正文
借助构造函数实现继承
function Parent1() {
this.name = '喵喵喵';this.arr = [1];}Parent1.prototype.say = function () {alert('我肯定没被继承,所以弹不出来');};function Child1() {Parent1.call(this); // 这里是借助构造函数实现继承的关键}var t1 = new Child1();
好的,我们来通过控制台看看结果:
可以发现,Child1已经成功继承了Parent1构造函数中个属性,那么问题来了,Parent1原型的属性Child1继承了吗?
答案是并没有!这就是借助构造函数实现继承的缺点,被继承对象原型上的属性不能被继承。
2.借助原型链实现继承
Tips:所有实例对象共享的属性和方法都放在prototype中
function Parent2() {this.arr = [1];this.a = '1';
}
Parent2.prototype.say = function () {alert('终于被继承了');
};
function Child2() {this.type = '汪汪汪';
}
Child2.prototype = new Parent2(); // 这里是借助原型链实现继承的关键
var s1 = new Child2();
var s2 = new Child2();
我们再次打开控制台看看:
ok!到这里,我们已经成功实现让Parent2中的属性以及它原型链上的属性都被继承。但是这里要注意包含引用类型属性的原型会被所有的实例共享
。啥意思呢?Child2.prototype = new Parent2();
这行代码把Parent2的实例赋给了Child2的原型,而Parent2中存在引用类型this.arr
。
s1和s2本是Child2的两个不同实例,但修改s2.arr同样映射到s1.arr这个问题体现出了借助原型链实现继承的缺点: Parent2中的引用属性被Child2的实例共享了
。
3.组合方式实现继承(原型链 + 构造函数)
function Parent3() {this.type = '喵喵喵';this.arr = [1]
}
function Child3() {this.type = '汪汪汪';Parent3.call(this); // 与2的唯一区别是多了这一句
}
Child3.prototype = new Parent3();
var s3 = new Child3();
var s4 = new Child3();
组合方式实现了Child3对Parent3构造函数内和原型上所有属性和方法的继承,并且Child3的实例对象之间也不会相互干扰。当然啦,厉害的看官已经发现了组合方式的问题:Parent3.call(this)、new Parent3();
在实现组合继承的过程中Parent3执行了两次
,这其实是没有必要的。
- 组合方式实现继承-优化
function Parent4() {this.type = '喵喵喵';this.arr = [1]}Parent4.prototype.cide = [1,2,3];function Child4() {this.type = '汪汪汪';Parent4.call(this);}Child4.prototype = Parent4.prototype;// 优化重点var s5 = new Child4();var s6 = new Child4();
这种组合方式的优化方案其实可以分两步来看:
1) Parent4.call(this)
实现对构造函数中的属性和方法的继承
2)Child4.prototype = Parent4.prototype;
实现对构造函数的原型的属性和方法的继承
观察3中的代码我们可以发现,通过Parent3.call(this)
我们规避了Parent构造函数中引用属性对child实例的影响,但如果Parent的原型中存在引用类型(Parent4.prototype.cide),那么在child的实例中修改该属性,同样会映射到其它实例。
浅谈JavaScript继承相关推荐
- 浅谈JavaScript继承与原型链
对于使用过基于类的语言(如java或C++)的开发人员来说,JavaScript有点令人困惑,因为它是动态的,并且本身不提供一个class实现. 在(es5/es6)中引入class关键字,但那只是语 ...
- 浅谈javascript继承【读javascript设计模式第四章节继承有感】
javascript继承,无任是类式继承,原型式继承还是渗元式继承都是通过不同方法去围绕着prototype转,简单分析下三种不同继承方法是如何围绕prototype转的 一:类似继承,先上关键代码 ...
- 浅谈javascript中原型(prototype)、构造函数、对象实例及三者之间的关系
转自:http://www.cnblogs.com/zhangwei412827/archive/2012/12/14/2816263.html 浅谈javascript中原型(prototype). ...
- JavaScript 中的 require / exports、import / export、浅谈JavaScript、ES5、ES6
Node.js 的基础教学 之 exports 和 module.exports:https://zhuanlan.zhihu.com/p/82057593 浅谈 JavaScript.ES5.ES6 ...
- 浅谈JavaScript作用域,关于Java的学习路线资料
javascript是目前web领域中使用非常广泛的语言,不管是在前端还是在后端都能看到它的影子,可以说web从业者不论怎样都绕不开它.在前端领域,各种框架层出不穷.在后端领域,nodejs可谓如火如 ...
- java同名函数_浅谈Java 继承接口同名函数问题
在Java中如果一个类同时继承接口A与B,并且这两个接口中具有同名方法,会怎么样? 动手做实验: interface A{ void fun(); } interface B{ void fun(); ...
- 浅谈 JavaScript 编程语言的编码规范--转载
原文:http://www.ibm.com/developerworks/cn/web/1008_wangdd_jscodingrule/ 对于熟悉 C/C++ 或 Java 语言的工程师来说,Jav ...
- html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight...
浅谈JavaScript中scrollTop.scrollHeight.offsetTop.offsetHeight 发布时间:2020-07-17 09:27:20 来源:亿速云 阅读:223 作者 ...
- 浅谈 JavaScript 编程语言的编码规范
转自:http://www.ibm.com/developerworks/cn/web/1008_wangdd_jscodingrule/?ca=drs-tp4608 developerWorks 中 ...
最新文章
- div嵌套div 背景图片 不显示的问题
- JAVA中字符串连接效率的测试(续)
- Css Div半透明
- Hadoop集群三种作业调度算法介绍
- C++入门经典-例7.8-const对象,标准尺寸
- EOF是什么?(转)
- 资源 | 普通程序员如何自学机器学习
- 检测和语义分割_分割和对象检测-第1部分
- C++ 基类和派生类的构造函数
- git 创建tag , 查看tag , 删除tag
- 人工智能先驱 Nils Nilsson 去世,吴恩达、Yann LeCun 悼念
- Windows 10 装Ubuntu 搞定了
- 第10章 随机山水画(《Python趣味创意编程》教学视频)
- c语言程序设计任正云,《C语言程序设计》任正云.ppt
- 用友U8修改货位现存量
- 倾斜摄影三维建模全流程
- php 图片合成,PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】...
- 一个男网友娶到一个女网友后在洞房发生的事情
- Axure旋转原件或图片
- mysql属于dbms还是dbs_DB、DBMS和DBS三者之间有什么关系_数据库
热门文章
- Linux软件包组的选择
- windows gtk+ 开发环境搭建
- c语言函数 t啥意思,C语言函数大全(t开头)
- sql数据迁移到oracle数据库,从Oracle到SQL Server数据库主键的迁移
- word2vec原理_Word2vec详细整理(1)—权重更新原理
- python webbrowser安装_如何为python webbrows设置BROWSER环境变量
- 刀片服务器和机架服务器性能,刀片服务器与机架服务器的区别是什么 刀片服务器与机架服务器的区别介绍...
- java求阶乘的程序_按要求编写Java程序(阶乘)
- Django输入日期返回第几天time
- 是vans_终于在中国发力的 Vans