快捷導(dǎo)航

JavaScript之Getters和Setters 平臺(tái)支持等詳細(xì)介紹

更新時(shí)間：2012年12月07日 12:20:58 作者：

現(xiàn)在，JavaScript的Getters和Setters使用非常廣泛，它和每個(gè)JavaScript開(kāi)發(fā)者的切身利益息息相關(guān),我們先來(lái)快速了解什么是Getters和Setters，以及它們?yōu)槭裁春苡杏?然后，我們來(lái)看看現(xiàn)在都有哪些平臺(tái)支持Gettets和Setters

來(lái)自John Resig早年的文章，大致翻譯了一下，以作備忘。
令人高興的是，我想我終于可以說(shuō)，“現(xiàn)在，JavaScript的Getters和Setters使用非常廣泛，它和每個(gè)JavaScript開(kāi)發(fā)者的切身利益息息相關(guān)”。靠，我為了說(shuō)這句話已經(jīng)等了很久了。
首先，我們先來(lái)快速了解什么是Getters和Setters，以及它們?yōu)槭裁春苡杏?。然后，我們?lái)看看現(xiàn)在都有哪些平臺(tái)支持Gettets和Setters。
Getters和Setters
Getters和Setters使你可以快速獲取或設(shè)置一個(gè)對(duì)象的數(shù)據(jù)。一般來(lái)說(shuō)，一個(gè)對(duì)象擁有兩個(gè)方法，分別用于獲取和設(shè)置某個(gè)值，比如：

復(fù)制代碼代碼如下:

 
{ 
getValue: function(){ 
return this._value; 
}, 
setValue: function(val){ 
this._value = val; 
} 
} 

用這種方式寫(xiě)JavaScript的一個(gè)明顯的好處是：你可以用它來(lái)隱藏那些不想讓外界直接訪問(wèn)的屬性。最終的代碼看起來(lái)就像下面這樣（用閉包保存新創(chuàng)建的Filed對(duì)象的value）：

復(fù)制代碼代碼如下:

 
function Field(val){ 
var value = val; 
this.getValue = function(){ 
return value; 
}; 
this.setValue = function(val){ 
value = val; 
}; 
} 

于是我們可以這樣使用：

復(fù)制代碼代碼如下:

 
var field = new Field("test"); 
field.value 
// => undefined 
field.setValue("test2") 
field.getValue() 
// => "test2" 

我們來(lái)模擬上例中的 “隱藏的value屬性”，我們的代碼就像這樣：

復(fù)制代碼代碼如下:

 
function Field(val){ 
var value = val; 
this.__defineGetter__("value", function(){ 
return value; 
}); 
this.__defineSetter__("value", function(val){ 
value = val; 
}); 
} 

但是呢，你不喜歡這樣寫(xiě)，而傾向在對(duì)象的prototype中定義getters和setters（私有變量寫(xiě)在哪并不重要），我們可以用另一種語(yǔ)法。

復(fù)制代碼代碼如下:

 
function Field(val){ 
this.value = val; 
} 
Field.prototype = { 
get value(){ 
return this._value; 
}, 
set value(val){ 
this._value = val; 
} 
}; 

這種語(yǔ)法看起來(lái)很不可思議，但是使用過(guò)一段時(shí)間之后，接受它也很容易。
接下來(lái)是另一個(gè)例子，它允許外界獲取一個(gè)username數(shù)組，但是卻不能獲取原始的，隱藏的user對(duì)象。

復(fù)制代碼代碼如下:

 
function Site(users){ 
this.__defineGetter__("users", function(){ 
// JS 1.6 Array map() 
return users.map(function(user){ 
return user.name; 
}); 
}; 
} 

作為福利，我寫(xiě)了一個(gè)方法，它可以幫你實(shí)現(xiàn)對(duì)象的繼承，并且還考慮到了getters和setters

復(fù)制代碼代碼如下:

 
// Helper method for extending one object with another 
function extend(a,b) { 
for ( var i in b ) { 
var g = b.__lookupGetter__(i), s = b.__lookupSetter__(i); 
if ( g || s ) { 
if ( g ) 
a.__defineGetter__(i, g); 
if ( s ) 
a.__defineSetter__(i, s); 
} else 
a[i] = b[i]; 
} 
return a; 
} 

在我的extend()方法中，你會(huì)發(fā)現(xiàn)兩個(gè)新方法：__lookupGetter__和__lookupSetter__。一旦你真正開(kāi)始使用getters和setters，這將很有用。
比如，當(dāng)我第一次寫(xiě)extend()方法時(shí)，我遇到了各種errors，我徹底暈了。后來(lái)我發(fā)現(xiàn)問(wèn)題就出在一個(gè)簡(jiǎn)單的語(yǔ)句上：a[i] = b[i];
如果對(duì)象a存在一個(gè)setter，名字叫做i，對(duì)象b存在一個(gè)getter，名字也叫做i，a[i]不是通過(guò)別的setter方法賦值的，而是來(lái)自b的getter方法。這兩個(gè)__lookup*__方法使你可以獲取原始的函數(shù)。（這段翻得有點(diǎn)晦澀，原文如下）

If a setter existed in object a, named i, and a getter existed in object b, named i, a[i]'s value was being set not to the other setter function, but to the computed value from b's getter function. The two __lookup*__ methods allow you to access the original functions used for the methods (thus allowing you to write an effective extend method, for example).
　　
記住以下幾點(diǎn)：
一個(gè)對(duì)象內(nèi)，每個(gè)變量只能有一個(gè)getter或setter。（因此value可以有一個(gè)getter和一個(gè)setter，但是value絕沒(méi)有兩個(gè)getters）
刪除getter或setter的唯一方法是：delete object[name]。delete可以刪除一些常見(jiàn)的屬性，getters和setters。
如果使用__defineGetter__或__defineSetter__，它會(huì)重寫(xiě)之前定義的相同名稱(chēng)的getter或setter，甚至是屬性(property)。
平臺(tái)
支持的瀏覽器有：
Firefox
Safari 3+
Opera 9.5
(原文沒(méi)寫(xiě)Chrome，還沒(méi)出呢)
我用下面的代碼測(cè)試瀏覽器：

復(fù)制代碼代碼如下:

javascript:foo={get test(){ return "foo"; }};alert(foo.test);

另外，以下兩種引擎也支持Getters和Setters：
SpiderMonkey
Rhino 1.6R6 (New)

您可能感興趣的文章: