关于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 相关文章推荐
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
JavaScript中Function详解
Feb 27 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 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
加强版phplib的DB类
2008/03/31 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
javascript 的Document属性和方法集合
2010/01/25 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
Node.js编码规范
2014/07/14 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
Python的log日志功能及设置方法
2019/07/11 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
生产工厂门卫岗位职责
2014/09/26 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
礼仪培训心得体会
2016/01/22 职场文书
初一数学教学反思
2016/02/17 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
background-position百分比原理详解
2021/05/08 HTML / CSS
浅谈MySQL中的六种日志
2022/03/23 MySQL