基于JavaScript实现继承机制之原型链(prototype chaining)的详解


Posted in Javascript onMay 07, 2013

如果用原型方式重定义前面例子中的类,它们将变为下列形式:

function ClassA() {
}
ClassA.prototype.color = "blue";
ClassA.prototype.sayColor = function () {
    alert(this.color);
};
function ClassB() {
}
ClassB.prototype = new ClassA();

原型方式的神奇之处在于最后一行代码。这里,把 ClassB 的 prototype 属性设置成 ClassA 的实例。这很有意思,因为想要 ClassA 的所有属性和方法,但又不想逐个将它们 添加到ClassB 的 prototype 属性。还有比把 ClassA 的实例赋予 prototype 属性更好的方法吗?

注意:调用 ClassA 的构造函数,没有给它传递参数。这在原型链中是标准做法。要确保构造函数没有任何参数。

与对象冒充相似,子类的所有属性和方法都必须出现在 prototype 属性被赋值后,因为在它之前赋值的所有方法都会被删除。为什么?因为 prototype 属性被替换成了新对象,添加了新方法的原始对象将被销毁。所以,为 ClassB 类添加 name 属性和 sayName() 方法的代码如下:

function ClassB() {
}
ClassB.prototype = new ClassA();
ClassB.prototype.name = "";
ClassB.prototype.sayName = function () {
    alert(this.name);
};

可通过运行下面的例子测试这段代码:
var objA = new ClassA();
var objB = new ClassB();
objA.color = "blue";
objB.color = "red";
objB.name = "John";
objA.sayColor();
objB.sayColor();
objB.sayName();

此外,在原型链中,instanceof 运算符的运行方式也很独特。对 ClassB 的所有实例,instanceof 为 ClassA 和 ClassB 都返回 true。例如:
var objB = new ClassB();
alert(objB instanceof ClassA);    //输出 "true"
alert(objB instanceof ClassB);    //输出 "true"

在 ECMAScript 的弱类型世界中,这是极其有用的工具,不过使用对象冒充时不能使用该方法判断。但是由于子类的原型被直接重新赋值,所以出现以下这种情况:
console.log(objB.__proto__===objB.constructor.prototype)   //false

因为ClassB的原型链 prototype 属性被另一个类的对象重写了。输出结果可以看出objB.__proto__仍然指向的是ClassB.prototype,而不是objB.constructor.prototype。这也很好理解,给Person.prototype赋值的是一个对象直接量new ClassA()实例,使用对象直接量方式定义的对象其构造器(constructor)指向的是根构造器Object,Object.prototype是一个空对象{},{}自然与ClassB.prototype不等。
Javascript 相关文章推荐
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
angular中的post请求处理示例详解
Jun 30 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 Javascript
JavaScript实现两个数组的交集
Mar 25 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 #Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 #Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 #Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 #Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 #Javascript
jQuery的slideToggle方法实例
May 07 #Javascript
jQuery实现动画效果的实例代码
May 07 #Javascript
You might like
php连接oracle数据库的核心步骤
2016/05/26 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
html数组字符串拼接的最快方法
2009/09/16 Javascript
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
javascript中this关键字详解
2016/12/12 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
用Python实现QQ游戏大家来找茬辅助工具
2014/09/14 Python
Python素数检测的方法
2015/05/11 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
python实现微信防撤回神器
2019/04/29 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
python中加背景音乐如何操作
2020/07/19 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
比利时家具购买网站:Home24
2019/01/03 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
学生操行评语大全
2014/04/24 职场文书
住宅质量保证书
2014/04/29 职场文书
3的组成教学反思
2014/04/30 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
学习教师法的心得体会
2014/09/03 职场文书
中班下学期个人总结
2015/02/12 职场文书
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis