JavaScript 構造函數 面相對象學習必備知識
2024-05-06 12:37:04
供稿：網友
代碼如下:
function A(x)
{
this.x = x;
}
var obj = new A(5);
alert(obj.x);
這段代碼十分簡單，但是我們重要的是看到了一個十分驚訝的結果，obj被我們賦予了一個屬性x，就如同我們在C#中使用某個類的實例的時候一樣。那么這個屬性是怎么樣產生的呢？
關鍵語句：this.x=x。這句話就是進行一個屬性的申明與賦值，這里，我們肯定會問到，this是什么？為什么可以使用this.x來進行申明與賦值屬性呢？
其實this代表的就是我們剛剛實例化出來的obj，就相當于我們使用obj去調用了構造函數A里面的屬性、方法等等。
那么，我們怎么樣去在構造函數中定義一個方法呢？
代碼如下:
function A(x,y)
{
this.x = x;
this.y = y;
A.prototype.FunX = function(){alert(x)};
A.prototype.FunY = function(){alert(y)};
}
var obj = new A(5,10);
alert(obj.x);
alert(obj.y);
obj.FunX();
obj.FunY();
執行的結果十分簡單，彈出5、10、5、10的結果，可以看到
代碼如下:
A.prototype.FunX = function(){alert(x)};
A.prototype.FunY = function(){alert(y)};
這兩句代碼定義了兩個方法，分別是FunX和FunY。那么，如果現在出現了一種情況，如果我們需要臨時的給A函數添加方法怎么辦呢？
代碼如下:
function A(x,y)
{
this.x = x;
this.y = y;
}
A.prototype.FunX = function(){alert("5")};
var obj = new A(5,10);
alert(obj.x);
alert(obj.y);
obj.FunX();
A.prototype.FunY = function(){alert("10")};
obj.FunY();
運行這段代碼，我們可以看到，彈出的結果還是和以前的結果一樣，但是我們將兩個方法都定義在了外邊，而且方法FunY是定義在實例化之后的，那么這里大家看出來了什么沒？很顯然，在我們使用obj.FunY()語句時候，代碼會重新的去構造一下obj，然后再來執行此方法，那么如果代碼改成這樣？
代碼如下:
obj.FunY();
A.prototype.FunY = function(){alert("10")};
很顯然，FunY()就不會去執行方法了。
下一遍，將會說一下關于JavaScript的構造函數與原型（prototype），若有疑問或不正之處，歡迎提出指正和討論。
