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


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 相关文章推荐
Javascript学习笔记4 Eval函数
Jan 11 Javascript
浏览器常用高宽的jquery插件
Feb 24 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
vue实现直播间点赞飘心效果的示例代码
Sep 20 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
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
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
Django中URLconf和include()的协同工作方法
2015/07/20 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
Python 获取项目根路径的代码
2019/09/27 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
回门宴答谢词
2014/01/13 职场文书
安全事故检讨书
2014/01/18 职场文书
廉政承诺书
2015/01/19 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android