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


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 相关文章推荐
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
图解js图片轮播效果
Dec 20 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
vue组件生命周期详解
Nov 07 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
详解小程序退出页面时清除定时器
Apr 28 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 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
我的论坛源代码(三)
2006/10/09 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
关于初学PHP时的知识积累总结
2013/06/07 PHP
php记录代码执行时间(实现代码)
2013/07/05 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
JQUERY获取form表单值的代码
2010/07/17 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
工作建议书范文
2014/05/13 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python