当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 对采用动态原型方式无法展示继承机制得思考

Javascript
JS 文件本身编码转换 图文教程
jQuery Ajax之$.get()方法和$.post()方法
jQuery Ajax之load()方法
JavaScript 核心参考教程 内置对象
JavaScript 核心参考教程 RegExp对象
javascript hashtable实现代码
百度留言本js 大家可以参考下
javascript 判断某年某月有多少天的实现代码 推荐
让iframe子窗体取父窗体地址栏参数(querystring)
jquery pagination插件实现无刷新分页代码
jQuery与javascript对照学习 获取父子前后元素 实现代码
通用javascript脚本函数库 方便开发
JQuery 绑定事件时传递参数的实现方法
支持IE,Firefox的javascript 日历控件
javascript 变速加数功能实现代码
extjs 学习笔记(一) 一些基础知识
extjs 学习笔记(二) Ext.Element类
Jquery 学习笔记(一)
一些技巧性实用js代码小结
jquery 常用操作整理 基础入门篇

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 79 ::
收藏到网摘: n/a

今天看书,作者讨论到能否采用动态原型方法展示继承机制,给出的答案是:不能。原因是prototype对象的唯一性。看下面代码(这段代码不正确,却值得研究)
复制代码 代码如下:

<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;该原型对象被赋予了有实际属性和方法的对象引用。