关于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 相关文章推荐
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 Javascript
对vuex中getters计算过滤操作详解
Nov 06 Javascript
让mocha支持ES6模块的方法实现
Jan 14 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
在vue中axios设置timeout超时的操作
Sep 04 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实现Ftp用户的在线管理的代码
2007/03/06 PHP
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
php rsa加密解密使用详解
2015/01/14 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
JSX在render函数中的应用详解
2019/09/04 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
Python分类测试代码实例汇总
2020/07/23 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
新闻学专业个人求职信写作
2014/02/04 职场文书
教师学习培训邀请函
2014/02/04 职场文书
离婚财产分割协议书
2015/08/11 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL
css height属性中的calc方法详解
2021/06/03 HTML / CSS
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers