关于JavaScript中原型继承中的一点思考


Posted in Javascript onJuly 25, 2012

我们先看一段传统的继承代码:

//定义超类 
function Father(){ 
this.name = "父亲"; 
} 
Father.prototype.theSuperValue = ["NO1","NO2"]; 
//定义子类 
function Child(){ 
} 
//实现继承 
Child.prototype = new Father(); 
//修改共享数组 
Child.prototype.theSuperValue.push("修改"); 
//创建子类实例 
var theChild = new Child(); 
console.log(theChild.theSuperValue); //["NO1","NO2","修改"] 
//创建父类实例 
var theFather = new Father(); 
console.log(theFather.theSuperValue); //["NO1","NO2","修改"]

通过上面的代码,我们注意“加红”的代码,子类Child的原型对象是父类Father的一个实例(new Father()),我们在这里是调用new Father()对象中的theSuperValue属性,因为new Father()对象中没有此属性(只有name属性),因此会沿着原型链向它的原型对象(Father.prototype)中去找,找到后发现是一个数组,而且是引用类型,此时我们往此数组中添加一个字符串“修改”。

之后,我们新建了Child的实例对象theChild,当theChild调用theSuperValue属性时,首先它自己里面没有此属性,就会去它的原型对象(new Father)中去找,可惜这里也没有,接着会到new Father()的原型中去找,OK,在Father.prototype中找到了这个数组,发现是["NO1","NO2","修改"]。

再接着,我们创建了Father的实例对象theFather,同上,我们在Father.prototype中找到了这个引用类型的数组["NO1","NO2","修改"]。(当然,数组都是引用类型的!)

通过上面的赘述,本来已经理解原型链概念的朋友觉得是废话连篇,其实我也是呵呵,接下来我们再看一个相似的例子:

//定义超类 
function Father() { 
this.name = "父亲"; 
} 
Father.prototype.theSuperValue = ["NO1", "NO2"]; 
//定义子类 
function Child() { 
} 
//实现继承 
Child.prototype = new Father(); 
//修改共享数组 
Child.prototype.theSuperValue = ["我是覆盖代码"] 
//创建子类实例 
var theChild = new Child(); 
console.log(theChild.theSuperValue); 
//创建父类实例 
var theFather = new Father(); 
console.log(theFather.theSuperValue);

我们看一下上面的代码,我用一种比较特别的紫色标注了此段代码与上段代码的小小区别,但结果却发生了“巨大”变化,见下面的截图:

关于JavaScript中原型继承中的一点思考

为什么我说是巨大变化,是因为我们从“重用公共属性”过渡到“覆盖公共属性,建立自己特色属性”上来!我这里是用数组演示的,其实第二种情况常常用在Function中,用子类的方法来覆盖父类的方法。

在第二段代码中,我们需要关注的是紫色代码前的“=”号,它是赋值操作符。如果我们对Child.prototype及new Father()对象调用这个赋值操作符时,我们就在这个对象上“新建”了一个属性,当在下面的theChild实例上调用theSuperValue时,返回的当然是新属性值["我是覆盖代码"]。

但当我们新创建一个父类实例theFather对象时,调用该对象上的theSuperValue属性,我们就会发现对象上并没有啊,这是为什么呢?因为我们刚才覆盖的是Father对象new Father();而不是Father类,所以,通过Fater()构造函数创建的新对象theFather并不包含新建的属性,当然,接下来的事情大家都明白,就是沿着原型链向上找,OK,在Father.prototype中找到了,就是我们一开始定义的那个数组。

通过上面两个例子,我们在JS中使用原型提供的继承功能时,尤其是利用子对象操作原型方法、对象时,切记“=”号赋值与引用调用这两种不同的操作,因为他们会带来完全不同的结果。

Javascript 相关文章推荐
网上抓的一个特效
May 11 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 Javascript
原生js 秒表实现代码
Jul 24 #Javascript
javascript设计模式 接口介绍
Jul 24 #Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 #Javascript
js+xml生成级联下拉框代码
Jul 24 #Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 #Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 #Javascript
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 #Javascript
You might like
利用PHP动态生成VRML网页
2006/10/09 PHP
php Mysql日期和时间函数集合
2007/11/16 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
Python实现统计代码行的方法分析
2017/07/12 Python
python入门教程 python入门神图一张
2018/03/05 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
python自定义函数def的应用详解
2020/06/03 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
Delphi笔试题
2016/11/14 面试题
会计求职信
2014/05/29 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
争先创优演讲稿
2014/09/15 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
冰峪沟导游词
2015/02/09 职场文书
干部考核工作总结2015
2015/07/24 职场文书
《小小的船》教学反思
2016/02/18 职场文书
用python批量解压带密码的压缩包
2021/05/31 Python