基于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 相关文章推荐
jquery中获取元素的几种方式小结
Jul 05 Javascript
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
jquery实现邮箱自动补全功能示例分享
Feb 17 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
小程序实现背景音乐播放和暂停
Jun 19 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中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
django框架自定义用户表操作示例
2018/08/07 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
生产主管岗位职责
2013/11/10 职场文书
团员个人的自我评价
2013/12/02 职场文书
大学毕业感言100字
2014/02/03 职场文书
遥感技术与仪器求职信
2014/02/22 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
护士先进个人总结
2015/02/13 职场文书
护士年终个人总结
2015/02/13 职场文书
民事诉讼代理词
2015/05/25 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL