前言

关于JavaScript继承相关的定义和方法网上已经有很多解释啦,本菜鸟就不抄抄写写惹人嫌了,本文主要探讨三种基本的继承方式并且给出优化方案。

正文

  1. 借助构造函数实现继承

    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继承相关推荐

  1. 浅谈JavaScript继承与原型链

    对于使用过基于类的语言(如java或C++)的开发人员来说,JavaScript有点令人困惑,因为它是动态的,并且本身不提供一个class实现. 在(es5/es6)中引入class关键字,但那只是语 ...

  2. 浅谈javascript继承【读javascript设计模式第四章节继承有感】

    javascript继承,无任是类式继承,原型式继承还是渗元式继承都是通过不同方法去围绕着prototype转,简单分析下三种不同继承方法是如何围绕prototype转的 一:类似继承,先上关键代码 ...

  3. 浅谈javascript中原型(prototype)、构造函数、对象实例及三者之间的关系

    转自:http://www.cnblogs.com/zhangwei412827/archive/2012/12/14/2816263.html 浅谈javascript中原型(prototype). ...

  4. JavaScript 中的 require / exports、import / export、浅谈JavaScript、ES5、ES6

    Node.js 的基础教学 之 exports 和 module.exports:https://zhuanlan.zhihu.com/p/82057593 浅谈 JavaScript.ES5.ES6 ...

  5. 浅谈JavaScript作用域,关于Java的学习路线资料

    javascript是目前web领域中使用非常广泛的语言,不管是在前端还是在后端都能看到它的影子,可以说web从业者不论怎样都绕不开它.在前端领域,各种框架层出不穷.在后端领域,nodejs可谓如火如 ...

  6. java同名函数_浅谈Java 继承接口同名函数问题

    在Java中如果一个类同时继承接口A与B,并且这两个接口中具有同名方法,会怎么样? 动手做实验: interface A{ void fun(); } interface B{ void fun(); ...

  7. 浅谈 JavaScript 编程语言的编码规范--转载

    原文:http://www.ibm.com/developerworks/cn/web/1008_wangdd_jscodingrule/ 对于熟悉 C/C++ 或 Java 语言的工程师来说,Jav ...

  8. html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight...

    浅谈JavaScript中scrollTop.scrollHeight.offsetTop.offsetHeight 发布时间:2020-07-17 09:27:20 来源:亿速云 阅读:223 作者 ...

  9. 浅谈 JavaScript 编程语言的编码规范

    转自:http://www.ibm.com/developerworks/cn/web/1008_wangdd_jscodingrule/?ca=drs-tp4608 developerWorks 中 ...

最新文章

  1. div嵌套div 背景图片 不显示的问题
  2. JAVA中字符串连接效率的测试(续)
  3. Css Div半透明
  4. Hadoop集群三种作业调度算法介绍
  5. C++入门经典-例7.8-const对象,标准尺寸
  6. EOF是什么?(转)
  7. 资源 | 普通程序员如何自学机器学习
  8. 检测和语义分割_分割和对象检测-第1部分
  9. C++ 基类和派生类的构造函数
  10. git 创建tag , 查看tag , 删除tag
  11. 人工智能先驱 Nils Nilsson 去世,吴恩达、Yann LeCun 悼念
  12. Windows 10 装Ubuntu 搞定了
  13. 第10章 随机山水画(《Python趣味创意编程》教学视频)
  14. c语言程序设计任正云,《C语言程序设计》任正云.ppt
  15. 用友U8修改货位现存量
  16. 倾斜摄影三维建模全流程
  17. php 图片合成,PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】...
  18. 一个男网友娶到一个女网友后在洞房发生的事情
  19. Axure旋转原件或图片
  20. mysql属于dbms还是dbs_DB、DBMS和DBS三者之间有什么关系_数据库

热门文章

  1. Linux软件包组的选择
  2. windows gtk+ 开发环境搭建
  3. c语言函数 t啥意思,C语言函数大全(t开头)
  4. sql数据迁移到oracle数据库,从Oracle到SQL Server数据库主键的迁移
  5. word2vec原理_Word2vec详细整理(1)—权重更新原理
  6. python webbrowser安装_如何为python webbrows设置BROWSER环境变量
  7. 刀片服务器和机架服务器性能,刀片服务器与机架服务器的区别是什么 刀片服务器与机架服务器的区别介绍...
  8. java求阶乘的程序_按要求编写Java程序(阶乘)
  9. Django输入日期返回第几天time
  10. 是vans_终于在中国发力的 Vans