详述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 相关文章推荐
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
js常用DOM方法详解
Feb 04 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
Vue.js搭建移动端购物车界面
Jun 28 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
javascript实现文字跑马灯效果
Jun 18 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技术实现加载字体并保存成图片
2015/07/27 PHP
php实现微信公众号无限群发
2015/10/11 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
Javascript中Eval函数的使用说明
2008/10/11 Javascript
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
基于python编写的微博应用
2014/10/17 Python
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
利用python画出折线图
2018/07/26 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
化妆师职业生涯规划书
2014/02/16 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
新闻编辑求职信
2014/07/13 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
基层党建工作简报
2015/07/21 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
开学第一天的感想
2015/08/10 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
使用Redis做预定库存缓存功能
2022/04/02 Redis
基于docker安装zabbix的详细教程
2022/06/05 Servers