對(duì)采用動(dòng)態(tài)原型方式無法展示繼承機(jī)制得思考
更新時(shí)間:2009年12月04日 13:37:55 作者:
今天看書,作者討論到能否采用動(dòng)態(tài)原型方法展示繼承機(jī)制,給出的答案是:不能。原因是prototype對(duì)象的唯一性。看下面代碼(這段代碼不正確,卻值得研究)
復(fù)制代碼 代碼如下:
<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());
//這句代碼是無法運(yùn)行的。FireBug顯示oTriangle1.getArea()不是一個(gè)function
</script>
剛開始琢磨這段代碼是很奇怪,為什么不能運(yùn)行呢?于是我就開始結(jié)合作者的敘述思考(作者在這段代碼后面的解釋很繞,不多看幾遍是理解不了他在說什么的),最后終于被我想通了。
我們已經(jīng)知道,用var anObject = new aFunction()形式創(chuàng)建對(duì)象的過程實(shí)際上可以分為3步:
?。?)建立新對(duì)象
?。?)將該對(duì)象內(nèi)置的prototype對(duì)象設(shè)置為構(gòu)造函數(shù)portotype引用的那個(gè)原型對(duì)象
?。?)將該對(duì)象作為this參數(shù)調(diào)用構(gòu)造函數(shù),完成成員設(shè)置等初始化工作
請(qǐng)大家注意第(2)步,原來,
復(fù)制代碼 代碼如下:
var oTriangle1 = new Triangle(12,4);
這句執(zhí)行時(shí),內(nèi)部執(zhí)行oTriangle1.prototype = Triangle.prototype;(當(dāng)然,此時(shí)Triangle.prototype對(duì)象本身也沒什么實(shí)際屬性和方法) 然后才繼續(xù)執(zhí)行直到第(3)步,運(yùn)行函數(shù)體,第一次運(yùn)行到
復(fù)制代碼 代碼如下:
Triangle.prototype = new Polygon();
但這句執(zhí)行完后,oTriangle1.prototype卻已經(jīng)無法再賦值了(即執(zhí)行不到oTriangle1.prototype = Triangle.prototype;),接下來程序執(zhí)行
復(fù)制代碼 代碼如下:
Triangle.prototype.getArea = function() {
return this.base * this.hei * 0.5;
};
但此時(shí)卻是為時(shí)已晚,oTriangle1.prototype對(duì)象是不會(huì)擁有該方法的,擁有該方法的只能是剛才new Polygon()創(chuàng)建的對(duì)象,于是就有了程序最后一行注釋的結(jié)果了。但是接下來創(chuàng)建的Triangle對(duì)象卻能正常運(yùn)行了。請(qǐng)看下面代碼:
代碼
復(fù)制代碼 代碼如下:
<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());
//這句代碼是無法運(yùn)行的。FireBug顯示oTriangle1.getArea()不是一個(gè)function
var oTriangle2 = new Triangle(10,5);
alert(oTriangle2.sides);
//程序最終運(yùn)行證明了我的理解是正確的。
alert(oTriangle2.getArea());
</script>
至于原因嘛,也就是我前面分析的,此時(shí)內(nèi)部執(zhí)行oTriangle2.prototype=Triangle.prototype;該原型對(duì)象被賦予了有實(shí)際屬性和方法的對(duì)象引用。
相關(guān)文章
ES6的函數(shù)rest參數(shù)使用小結(jié)
這篇文章主要介紹了ES6的函數(shù)rest參數(shù)用法,通過一個(gè)rest參數(shù)代替arguments變量的例子,對(duì)ES6?rest參數(shù)用法講解的非常詳細(xì),需要的朋友可以參考下2023-08-08
Redux實(shí)現(xiàn)組合計(jì)數(shù)器的示例代碼
本篇文章主要介紹了Redux實(shí)現(xiàn)組合計(jì)數(shù)器的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
JS前端接口防止重復(fù)請(qǐng)求的三種實(shí)現(xiàn)方案
前段時(shí)間心血來潮,想把項(xiàng)目的前端都做一下接口防止重復(fù)請(qǐng)求的處理,雖然大部分的接口處理我們都是加了loading的,但又不能確保真的是每個(gè)接口都加了的,下面就來總結(jié)一下這次的防重復(fù)請(qǐng)求的實(shí)現(xiàn)方案,需要的朋友可以參考下2024-03-03
深入剖析JavaScript中Geolocation?API的使用
這篇文章主要來和大家一起深入探討?JavaScript?的?Geolocation?API,看看它的強(qiáng)大之處以及如何在你的項(xiàng)目中應(yīng)用它,感興趣的可以了解下2024-03-03
用DIV完美模擬createPopup 彈出窗口(腳本之家修正版),支持Firefox,ie,chrome
最近要重構(gòu)公司的一個(gè)站,有一個(gè)拾色器只支持IE,不支持FIREFOX CHROME等瀏覽器,花了點(diǎn)時(shí)間對(duì)照原來的重寫了個(gè)。完美實(shí)現(xiàn)createPopup方法的彈窗效果,歡迎大家拍磚!2009-09-09
開發(fā)中常用的25個(gè)JavaScript單行代碼(小結(jié))
這篇文章主要介紹了開發(fā)中常用的25個(gè)JavaScript單行代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06
ECMAScript6變量的解構(gòu)賦值實(shí)例詳解
ES6允許按照一定模式,從數(shù)組和對(duì)象中提取值,對(duì)變量進(jìn)行賦值,這被稱為解構(gòu)(Destructuring),下文中給大家提供了嵌套數(shù)組的解構(gòu)例子,大家一起看看吧2017-09-09

