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


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 相关文章推荐
jQuery示例收集
Nov 05 Javascript
菜鸟javascript基础整理1
Dec 06 Javascript
Javascript 垃圾收集机制介绍理解
May 14 Javascript
JS字符串处理实例代码
Aug 05 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
May 10 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
js 实现在2d平面上画8的方法
Oct 10 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
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 session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
jquery判断元素的子元素是否存在的示例代码
2014/02/04 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
Python中优化NumPy包使用性能的教程
2015/04/23 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
CSS3绘制不规则图形的一些方法示例
2015/11/07 HTML / CSS
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
高中生毕业学习总结的自我评价
2013/11/14 职场文书
职业技术学校毕业生推荐信
2013/12/03 职场文书
离婚协议书范文2014
2014/10/16 职场文书
工作表扬信范文
2015/01/17 职场文书
护理工作个人总结
2015/03/03 职场文书
JavaScript ES6的函数拓展
2022/01/18 Javascript
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS