JavaScript基于原型链的继承


Posted in Javascript onJune 22, 2016

Javascript并不是一门面向对象的语言,没有提供传统的继承方式,但是它提供了一种原型继承的方式,利用自身提供的原型属性来实现继承。

原型链是JavaScript中继承的主要方法。

原型链的基本思想是:利用原型让一个引用类型继承另一个引用类型的属性和方法。

构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。

如果让原型对象等于另一个对象的实例,这样原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。

实现原型链的基本模式:

function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function () {
return this.property;
};
function SubType() {
this.subproperty = false;
}
// 继承SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function () {
return this.subproperty;
};
var instance = new SubType();
alert(instance.getSuperValue()); // true

SubType继承了SuperType,继承是通过创建SuperType的实例,并将该实例赋给SubType.prototype实现的。实现的本质是重写原型对象,换成一个新类型的实例。这样,原来存在于SuperType的实例中的属性和方法,也存在与SubType.prototype中了。然后给SubType.prototype添加一个方法,这样就继承了SuperType的属性和方法的基础上又添加了一个方法。

上例中的实例关系表示如下:

JavaScript基于原型链的继承

上面没有使用SubType默认提供的原型,而是给它换了一个新原型;这个新原型就是SuperType的实例。新原型内部还有一个执行SuperType的原型的指针。结果变成了instance指向SubType的原型,SubType的原型又指向SuperType的原型。getValue()方法仍然还在SuperType.prototype中,但prototype则位于SubType.prototype中。这是因为property是一个实例属性,而getSuperValue()则是一个原型方法。既然SubType.prototype现在是SuperType的实例,那么property自然位于该实例中。

注意:instance.constructor现在指向的是SuperType,因为SubType的原型指向了另一个对象——SuperType的原型,这个原型对象的constructor属性指向的是SuperType。

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

默认的原型

所有引用类型都默认继承了Object,而这个继承也是通过原型链实现的。所有函数的默认原型都是Object的实例。因此默认原型都会包含一个内部指针,指向Object.prototype。这就是为什么自定义类型都会继承toString()、valueOf()等方法的原因。

完整的原型链:

JavaScript基于原型链的继承

在上面的继承体系中,SubType继承了SuperType,SuperType继承了Object。当调用了instance.toString()时,实际调用的是保存在Object.prototype中的那个方法。

确定实例和原型的关系

可以通过两种方式来确定原型和实例之间的关系:

使用instanceof操作符

alert(instance instanceof Object);
alert(instance instanceof SuperType);
alert(instance instanceof SubType);

由于原型链的关系,上面全部返回true。

使用isPrototypeOf()方法

alert(Object.prototype.isPrototypeOf(instance));
alert(SuperType.prototype.isPrototypeOf(instance));
alert(SubType.prototype.isPrototypeOf(instance));

谨慎定义方法

给原型添加方法的代码一定要放在替换原型的语句之后。

function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function () {
return this.property;
};
function SubType() {
this.subproperty = false;
}
SuperType.prototype = new SuperType();
// 添加方法
SubType.prototype.getSubValue = function () {
return this.subproperty;
};
// 覆盖超类中的方法
SubType.prototype.getSuperValue = function () {
return false;
};
var instance = new SubType();
alert(instance.getSuperValue()); // false

上面的例子必须注意的是,在用SuperType的实例替换原型之后,再定义那两个方法。

另外,在通过原型链实现继承时,不能使用该对象字面量创建原型方法。因为这样做会重写原型链:

function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function () {
return this.property;
};
function SubType() {
this.subproperty = false;
}
// 继承SuperType
SubType.prototype = new SuperType();
// 使用字面量添加新方法,导致上一行代码无效
SubType.prototype = {
getSubValue :function() {
return this.subproperty;
},
someOtherMethod: function () {
return false;
}
};
var instance = new SubType();
alert(instance.getSuperValue()); // error

上例将SuperType的实例赋值给原型,紧接着又将原型替换成一个对象字面量而导致的问题。现在的原型包含一个Object的实例,而非SuperType的实例,SubType和SuperType之间已经没有关系了。

原型链的问题

前面已经介绍过,包含引用类型值得原型属性会被所有实例共享;而这也正是为什么要在构造函数中,而不是在原型对象中定义属性的原因。

function SuperType() {
this.colors = ["red", "blue", "green"];
}
function SubType() {
}
SubType.prototype = new SuperType();
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); // "red", "blue", "green", "black"
var instance2 = new SubType();
alert(instance2.colors); // "red", "blue", "green", "black"

在上面的例子中,SuperType构造函数中定义了一个colors属性,该属性包含一个数组,SuperType的每个实例都会有各自包含自己数组的colors属性。当SubType通过原型链继承了SuperType之后,SubType.prototype就变成了SuperType的一个实例,所以它也拥有了一个它自己的colors属性。但是,SubType的所有实例都会共享这一个colors属性。

另一问题是,没有办法在不影响所有对象实例的情况下,给超类的构造函数传递参数。

以上所述是小编给大家介绍的JavaScript基于原型链的继承 的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
详解用node编写自己的cli工具
May 23 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
Angular 数据请求的实现方法
May 07 Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 #Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 #Javascript
浅析jQuery Ajax通用js封装
Jun 22 #Javascript
Javascript如何判断数据类型和数组类型
Jun 22 #Javascript
最全的Javascript编码规范(推荐)
Jun 22 #Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 #Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 #Javascript
You might like
php实现的树形结构数据存取类实例
2014/11/29 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
vue动态注册组件实例代码详解
2019/05/30 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
机器学习python实战之手写数字识别
2017/11/01 Python
Python生成器以及应用实例解析
2018/02/08 Python
django Serializer序列化使用方法详解
2018/10/16 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
pytorch之添加BN的实现
2020/01/06 Python
python绘制封闭多边形教程
2020/02/18 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
高一化学教学反思
2014/02/05 职场文书
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python