对采用动态原型方式无法展示继承机制得思考


Posted in Javascript onDecember 04, 2009
<script type="text/javascript"> 
function Polygon(iSides) { 
this.sides = iSides; 
if(typeof Polygon._initialized == "undefined") { 
Polygon.prototype.getArea = function() { 
return 0; 
}; 
Polygon._initialized = true; 
} 
} 
function Triangle(iBase,iHeight) { 
Polygon.call(this,3); 
this.base = iBase; 
this.hei = iHeight; 
if(typeof Triangle._initialized == "undefined") { 
Triangle.prototype = new Polygon(); 
Triangle.prototype.getArea = function() { 
return this.base * this.hei * 0.5; 
}; 
Triangle._initialized = true; 
} 
} 
var oTriangle1 = new Triangle(12,4); 
alert(oTriangle1.sides); 
//alert(oTriangle1.getArea()); 
//这句代码是无法运行的。FireBug显示oTriangle1.getArea()不是一个function 
</script>

刚开始琢磨这段代码是很奇怪,为什么不能运行呢?于是我就开始结合作者的叙述思考(作者在这段代码后面的解释很绕,不多看几遍是理解不了他在说什么的),最后终于被我想通了。

我们已经知道,用var anObject = new aFunction()形式创建对象的过程实际上可以分为3步:

(1)建立新对象

(2)将该对象内置的prototype对象设置为构造函数portotype引用的那个原型对象

(3)将该对象作为this参数调用构造函数,完成成员设置等初始化工作

请大家注意第(2)步,原来,

var oTriangle1 = new Triangle(12,4);

这句执行时,内部执行oTriangle1.prototype = Triangle.prototype;(当然,此时Triangle.prototype对象本身也没什么实际属性和方法) 然后才继续执行直到第(3)步,运行函数体,第一次运行到

Triangle.prototype = new Polygon();

但这句执行完后,oTriangle1.prototype却已经无法再赋值了(即执行不到oTriangle1.prototype = Triangle.prototype;),接下来程序执行

Triangle.prototype.getArea = function() { 
return this.base * this.hei * 0.5; 
};

但此时却是为时已晚,oTriangle1.prototype对象是不会拥有该方法的,拥有该方法的只能是刚才new Polygon()创建的对象,于是就有了程序最后一行注释的结果了。但是接下来创建的Triangle对象却能正常运行了。请看下面代码:

代码

<script type="text/javascript"> 
function Polygon(iSides) { 
this.sides = iSides; 
if(typeof Polygon._initialized == "undefined") { 
Polygon.prototype.getArea = function() { 
return 0; 
}; 
Polygon._initialized = true; 
} 
} 
function Triangle(iBase,iHeight) { 
Polygon.call(this,3); 
this.base = iBase; 
this.hei = iHeight; 
if(typeof Triangle._initialized == "undefined") { 
Triangle.prototype = new Polygon(); 
Triangle.prototype.getArea = function() { 
return this.base * this.hei * 0.5; 
}; 
Triangle._initialized = true; 
} 
} 
var oTriangle1 = new Triangle(12,4); 
alert(oTriangle1.sides); 
//alert(oTriangle1.getArea()); 
//这句代码是无法运行的。FireBug显示oTriangle1.getArea()不是一个function 
var oTriangle2 = new Triangle(10,5); 
alert(oTriangle2.sides); 
//程序最终运行证明了我的理解是正确的。 
alert(oTriangle2.getArea()); 
</script>

至于原因嘛,也就是我前面分析的,此时内部执行oTriangle2.prototype=Triangle.prototype;该原型对象被赋予了有实际属性和方法的对象引用。

Javascript 相关文章推荐
用javascript实现自定义标签
May 08 Javascript
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
JQuery 1.4 中的Ajax问题
Jan 23 Javascript
js 验证密码强弱的小例子
Mar 21 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
Javascript实现单张图片浏览
Dec 18 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 #Javascript
javascript 跳转代码集合
Dec 03 #Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 #Javascript
javascript json 新手入门文档
Dec 03 #Javascript
js 屏蔽鼠标右键脚本附破解方法
Dec 03 #Javascript
33种Javascript 表格排序控件收集
Dec 03 #Javascript
javascript 面向对象全新理练之原型继承
Dec 03 #Javascript
You might like
php实现的MySQL通用查询程序
2007/03/11 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
Symfony生成二维码的方法
2016/02/04 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
PHP attributes()函数讲解
2019/02/03 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
JavaScript 学习笔记(五)
2009/12/31 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
小程序云开发实战小结
2018/10/25 Javascript
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
python如何重载模块实例解析
2018/01/25 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
管道维修工岗位职责
2013/12/27 职场文书
学习十八大精神心得体会
2013/12/31 职场文书
疾病捐款倡议书
2014/05/13 职场文书
拆迁委托协议书
2014/09/15 职场文书
交通违章检讨书
2014/09/21 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技