详述JavaScript实现继承的几种方式(推荐)


Posted in Javascript onMarch 22, 2016

ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的。

原型链

原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。每一个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的指针。如果:我们让原型对象A等于另一个类型B的实例,那么原型对象A就会有一个指针指向B的原型对象,相应的B的原型对象中保存着指向其构造函数的指针。假如B的原型对象又是另一个类型的实例,那么上述的关系依旧成立,如此层层递进,就构成了实例与原型的链条。

详述JavaScript实现继承的几种方式(推荐) 

实例以及构造函数和原型之间的关系图如下所示:

详述JavaScript实现继承的几种方式(推荐) 

person.constructor现在指向的是Parent,这是因为Child.prototype指向了Parent的原型,而Parent原型对象的constructor指向Parent。

当以读取模式访问一个实例属性时,首先会在实例中搜索该属性,如果没有找到该属性,则会继续搜索实例的原型。在通过原型链实现的集成中,搜索过程就会沿着原型链继续向上,直到搜索到原型链的末端。

例如,调用person.getParentValue()方法,1)搜索实例;2)搜索Child.prototype;3)搜索Parent.prototype;找到了getParentValue()方法停止。

1、默认的原型

前面的例子中展示的原型链少了一环,所有引用类型默认都继承了Object,而这个继承也是通过原型链实现的。因此默认的原型都包含一个内部指针,指向Object.prototype,这也正是所有自定义类型会继承toString()、ValueOf()等默认方法的根本原因。换句话说Object.prototype就是原型链的末端。

详述JavaScript实现继承的几种方式(推荐) 

2、确定原型和实例的关系

通过两种方式可以确定原型和实例之间的关系,第一种是使用instanceOf操作符,第二种是使用isPrototypeOf()方法。
实例 instanceOf 原型链 中出现过的构造函数,都会返回true

console.log(person instanceOf Child);//true 

console.log(person instanceOf Parent);//true 
console.log(person instanceOf Object);//true 
isPrototype(),只要是原型链中出现过的原型,都可以说是该原型链所派生出来的实例的原型,因此也返回true. 
console.log(Object.prototype.isPrototypeOf(instance));//true 
console.log(Parent.prototype.isPrototypeOf(instance));//true 
console.log(Child.prototype.isPrototypeOf(instance));//true

3、谨慎地定义方法

子类型有时候需要覆盖超类型中的某个方法,或者需要添加超类型中不存在的莫个方法,注意:给原型添加方法的代码一定要放在替换原型的语句之后。

当通过Child的实例调用getParentValue()时,调用的是这个重新定义过的方法,但是通过Parent的实例调用getParentValue()时,调用的还是原来的方法。

格外需要注意的是:必须要在Parent的实例替换原型之后,再定义这两个方法。

还有一点需要特别注意的是:通过原型链实现继承时,不能使用对象字面量创建原型方法,因为这样做会重写原型链。

详述JavaScript实现继承的几种方式(推荐) 

以上代码刚把Parent的实例赋值给Child的原型对象,紧接着又将原型替换成一个字面量,替换成字面量之后,Child原型实际上包含的是一个Object的实例,而不再是Parent的实例,因此我们设想中的原型链被切断.Parent和Child之间没有任何关联。

4、原型链的问题

原型链很强大,可以利用它来实现继承,但是也有一些问题,主要的问题还是包含引用类型值的原型属性会被所有实例共享。因此我们在构造函数中定义实例属性。但是在通过原型来实现继承时,原型对象其实变成了另一个类型的实例。于是原先定义在构造函数中的实例属性变成了原型属性了。

举例说明如下:

详述JavaScript实现继承的几种方式(推荐) 

在Parent构造函数中定义了一个friends属性,该属性值是一个数组(引用类型值)。这样,Parent的每个实例都会各自包含自己的friends属性。当Child通过原型链继承了Parent之后,Child.prototype也用用了friends属性——这就好像friends属性是定义在Child.prototype一样。这样Child的所有实例都会共享这个friends属性,因此我们对kid1.friends做的修改,在kid2.friends中也会体现出来,显然,这不是我们想要的。

原型链的另一个问题是:在创建子类型的实例时,不能在不影响所有对象实例的情况下,给超类型的构造函数传递参数。因此,我们通常很少会单独使用原型链。

借用构造函数

为了解决原型中包含引用类型值带来的一些问题,引入了借用构造函数的技术。这种技术的基础思想是:在子类型构造函数的内部调用超类型构造函数。

详述JavaScript实现继承的几种方式(推荐) 

Parent.call(this)在新创建的Child实例的环境下调用了Parent构造函数。在新创建的Child实例环境下调用Parent构造函数。这样,就在新的Child对象上,此处的kid1和kid2对象上执行Parent()函数中定义的对象初始化代码。这样,每个Child实例就都会具有自己的friends属性的副本了。

借用构造函数的方式可以在子类型的构造函数中向超类型构造函数传递参数。

详述JavaScript实现继承的几种方式(推荐) 

为了确保子类型的熟悉不会被父类的构造函数重写,可以在调用父类构造函数之后,再添加子类型的属性。
构造函数的问题:

构造函数模式的问题,在于方法都在构造函数中定义,函数复用无从谈起,因此,借用构造函数的模式也很少单独使用。

组合继承

组合继承指的是将原型链和借用构造函数的技术组合在一块,从而发挥二者之长。即:使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。

详述JavaScript实现继承的几种方式(推荐) 

Person构造函数定义了两个属性:name和friends。Person的原型定义了一个方法sayName()。Child构造函数在调用Parent构造函数时,传入了name参数,紧接着又定义了自己的属性age。然后将Person的实例赋值给Child的原型,然后又在该原型上定义了方法sayAge().这样,两个不同的Child实例既分别拥有自己的属性,包括引用类型的属性,又可以使用相同的方法了。
组合继承避免了原型链和构造函数的缺陷,融合了他们的有点,成为JavaScript中最常用的继承模式。而且,instanceOf和isPropertyOf()也能够识别基于组合继承创建的对象。

最后,关于JS对象和继承都还有几种模式没有写,或者说,我自己也还未去深刻研究,但是,我想,首先将组合模式应用的游刃有余。并且,对于为何选用组合模式,知其然,知其所以然。

关于JavaScript实现继承的几种方式(推荐),小编就给大家介绍到这里,希望对大家有所帮助!

Javascript 相关文章推荐
javascript数字数组去重复项的实现代码
Dec 30 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
jQuery 联动日历实现代码
May 31 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 Javascript
react ant Design手动设置表单的值操作
Oct 31 Javascript
javascript代码实现简易计算器
Jan 25 Javascript
jQuery toggle 代替方法
Mar 22 #Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 #Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 #Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 #Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 #Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 #Javascript
Node.js文件操作方法汇总
Mar 22 #Javascript
You might like
php中防止伪造跨站请求的小招式
2011/09/02 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
python中函数默认值使用注意点详解
2016/06/01 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
Python3中的json模块使用详解
2018/05/05 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
会展中心部门工作职责
2013/11/27 职场文书
正规的求职信范文分享
2013/12/11 职场文书
普通话演讲稿
2014/09/03 职场文书
网络营销计划书
2015/01/17 职场文书
保送生自荐信
2015/03/06 职场文书
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript