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


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+XML 操作
Sep 20 Javascript
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
Dec 13 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 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 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
php全角字符转换为半角函数
2014/02/07 PHP
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
php内嵌函数用法实例
2015/03/20 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
Python模块文件结构代码详解
2018/02/03 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
Python tkinter实现日期选择器
2021/02/22 Python
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
关于赌博的检讨书
2014/01/08 职场文书
战友聚会邀请函
2014/01/18 职场文书
活动邀请函范文
2014/01/19 职场文书
小学敬老月活动方案
2014/02/11 职场文书
教师校本培训方案
2014/02/26 职场文书
建议书的格式
2014/05/12 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
初中重阳节活动总结
2015/05/05 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers