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


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 相关文章推荐
根据分辨率不同,调用不同的css文件
Jul 07 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
script标签属性用type还是language
Jan 21 Javascript
详解JavaScript数组和字符串中去除重复值的方法
Mar 07 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
jQuery的事件预绑定
Dec 05 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
javascript 中关于array的常用方法详解
May 05 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 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
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
Djang中静态文件配置方法
2015/07/30 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
浅析PEP572: 海象运算符
2019/10/15 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
python的help函数如何使用
2020/06/11 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
网络体系结构及协议的定义
2014/03/13 面试题
药学专业个人自我评价
2013/11/11 职场文书
工作表现评语
2014/01/19 职场文书
护士进修自我鉴定
2014/02/07 职场文书
师说教学反思
2014/02/07 职场文书