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


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 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
js判断60秒以及倒计时示例代码
Jan 24 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
js验证上传图片的方法
May 12 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
vue项目引入ts步骤(小结)
Oct 31 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
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
php跨服务器访问方法小结
2015/05/12 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
用户注册常用javascript代码
2009/08/29 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
axios学习教程全攻略
2017/03/26 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
Python中的生成器和yield详细介绍
2015/01/09 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
基于pip install django失败时的解决方法
2018/06/12 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
python实现横向拼接图片
2020/03/23 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
师德师风剖析材料
2014/09/30 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
525心理健康活动总结
2015/05/08 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL