基于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 相关文章推荐
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
canvas实现弧形可拖动进度条效果
May 11 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
微信小程序视图template模板引用的实例详解
Sep 20 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
js简单的分页器插件代码实例
Sep 11 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数组函数
2008/08/18 PHP
初识php MVC
2014/09/10 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
JS常见算法详解
2017/02/28 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
关于vue-router路径计算问题
2017/05/10 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
Django实现组合搜索的方法示例
2018/01/23 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
工商管理专业实习生自我鉴定
2013/09/29 职场文书
建筑班组长岗位职责
2014/01/02 职场文书
临床医师专业个人自我评价
2014/01/08 职场文书
开业主持词
2014/03/21 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
检讨书之工作不认真
2019/08/14 职场文书
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python