关于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 相关文章推荐
List the Stored Procedures in a SQL Server database
Jun 20 Javascript
Firefox div高度自适应
Apr 28 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
js定时器的使用(实例讲解)
Jan 06 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 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编写简单的文章发布程序
2015/06/18 PHP
php精度计算的问题解析
2019/06/21 PHP
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
Python 字符串操作方法大全
2014/03/11 Python
python从入门到精通(DAY 2)
2015/12/20 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
为什么需要版本控制
2016/10/28 面试题
在职党员进社区活动总结
2014/07/05 职场文书
药店促销活动总结
2014/07/10 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
2014年前台文员工作总结
2014/12/08 职场文书
归元寺导游词
2015/02/06 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
你会写请假条吗?
2019/06/26 职场文书
MySQL数据库完全卸载的方法
2022/03/03 MySQL