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


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 相关文章推荐
在线编辑器中换行与内容自动提取
Apr 24 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
May 03 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 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
2021年最新CPU天梯图
2021/03/04 数码科技
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
修改npm全局安装模式的路径方法
2018/05/15 Javascript
详解js类型判断
2018/05/22 Javascript
了解重排与重绘
2019/05/29 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
Python从零开始创建区块链
2018/03/06 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
numpy基础教程之np.linalg
2019/02/12 Python
python装饰器练习题及答案
2019/11/01 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
争论的故事教学反思
2014/02/06 职场文书
学校督导评估方案
2014/06/10 职场文书
演讲比赛策划方案
2014/06/11 职场文书
三八妇女节致辞
2015/07/31 职场文书