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实现手把手教你月入万刀(转贴)
Nov 07 Javascript
js查找父节点的简单方法
Jun 28 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
详解vue 2.6 中 slot 的新用法
Jul 09 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
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
基于文本的访客签到簿
2006/10/09 PHP
谈谈新手如何学习PHP
2006/12/14 PHP
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
CURL状态码列表(详细)
2013/06/27 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
php中序列化与反序列化详解
2017/02/13 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
php源码的安装方法和实例
2019/09/26 PHP
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
为指定元素增加样式的js代码
2009/12/09 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
bootstrap中的 form表单属性role="form"的作用详解
2017/01/20 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
Python操作列表之List.insert()方法的使用
2015/05/20 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
电大本科自我鉴定
2014/02/05 职场文书
小摄影师教学反思
2014/04/27 职场文书
停车场管理制度范本
2015/08/05 职场文书
Python如何加载模型并查看网络
2022/07/15 Python