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


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 相关文章推荐
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
vue实现简单实时汇率计算功能
Jan 15 Javascript
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
JS window对象简单操作完整示例
Jan 14 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 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.MVC的模板标签系统(一)
2006/09/05 PHP
yii上传文件或图片实例
2014/04/01 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
python中list列表的高级函数
2016/05/17 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
Numpy中的mask的使用
2018/07/21 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
英国名牌男装店:Standout
2021/02/17 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
高中毕业生自我鉴定范文
2013/09/26 职场文书
美术教师岗位职责
2014/03/18 职场文书
安全保证书格式
2015/02/28 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
教师听课学习心得体会
2016/01/15 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL