javascript支持面向對象的開發(2)
發表于:2007-06-30來源:作者:點擊數:
標簽:
這些類有層次之分嗎? 另一個好問題的是 Java Script的類是否有層次之分?;卮鹗强隙ㄓ?。我們來仔細看看是怎么做到分層的。我們可以定義一個 Rectangle 子類,并把 Figure 作為父類: function Rectangle(startX, startY, endX, endY) { this.width = endX -
這些類有層次之分嗎?
另一個好問題的是
JavaScript的類是否有層次之分?;卮鹗强隙ㄓ?。我們來仔細看看是怎么做到分層的。我們可以定義一個
Rectangle子類,并把
Figure作為父類:
function Rectangle(startX, startY, endX, endY) {
this.width = endX - startX;
this.height = endY - startY;
this.centerX = (endX + startX)/2;
this.centerY = (endY + startY)/2;
this.computeArea = computeArea;
function computeArea() {
this.area = this.width*this.height;
} }
Rectangle.prototype = new Figure();
Rectangle對象是用4個自變量創建的,前四行是構造器。
Rectangle類包含了一個方法:
computeArea()。最后一行
Rectangle.prototype = new Figure();,把
Rectangle類定義為從
Figure類繼承來的子類。
然我來解釋一下
prototype(原型)。每個對象構造器都有
prototype屬性;這是用來給所有的對象增加新屬性和方法的。這就是為什么原型被用來實現繼承:
child.prototype = new parent();。通過原型,父對象的所有屬性和方法都被添加到子對象上。
要注意
this.centerX,
this.centerY,和
area是
Rectangle類中所使用的屬性,但是它們是
Figure父類的屬性。和
Rectangle類相似,
Circle類可以被定義成
Figure類的原型。這種父子關系可以按你需要來定義深度;你可以創建另一個
Rectangle的子類。
我如何創建一個類的實例?
在JavaScript里創建一個類的實例很容易:
rect = new Rectangle(100,100,900,800);
這就創建了
Rectangle類型的一個對象。
Rectangle的構造器在屬性
width,
height,
centerX, 和
centerY中填入了值。
rect.area屬性的值是零(0)。使用這個命令就能調用
area方法:
rect.computeArea();
rect.area的值現在是560,000。要調用
transform方法使用:
rect.transform(100,200,0);
父和子對象的屬性可以像這樣訪問到:
var ar = rect.area;
var wi = rect.width;
我能超越屬性和方法嗎?
就像你在Java中的一樣,你可以超越屬性和方法。在子類中定義的屬性或者方法可以超越同名的父類的屬性和方法。
和全局變量互動
JavaScript也支持全局變量的使用。在以下代碼段中
測試一下
g_area變量的范圍:
<HTML>
<SCRIPT>
var g_area = 20;
function Figure() {
…
this.area=g_area;
…
}
function Rectangle(){ … }
Rectangle.prototype = new Figure();
function test(){
g_area = 40;
rect = new Rectangle();
alert(rect.area);
}
</SCRIPT>
<BODY onLoad = @#test()@#/>
</BODY>
</HTML>
rect.area的值是20(不是你預計的40),這是因為
Rectangle對象是
Figure對象的原型,這種關系在
test()被調用以前就被定義了。要使用
g_area的新值,你需要用以下的方法:
function test() {
g_area = 40;
Rectangle.prototype = new Figure();
rect = new Rectangle();
alert(rect.area);
}
對于所有的
Rectangle的新實例,這將改變
area屬性的值?;蛘?,你可以使用這種方法:function test() {
g_area = 40;
rect = new Rectangle();
Rectangle.prototype.area = g_area;
alert(rect.area);
}
這將改變
Rectangle所有現存的以及新實例的
area屬性的值。
結論
為了效仿OO
開發,JavaScript提供了必需的繼承、封裝和超越屬性,盡管它不支持接口和方法的過載。如果你是剛接觸到OO開發,用它試試。OO概念允許開發者將一組數據和相關操作集中入一個對象。這在管理瀏覽器事件和管理瀏覽器內SVG圖時很有用。
原文轉自:http://www.kjueaiud.com