JavaScript之Getters和Setters 平臺(tái)支持等詳細(xì)介紹
2024-05-06 14:20:43
供稿：網(wǎng)友
來(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è)值，比如：
代碼如下:
{
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）：
代碼如下:
function Field(val){
var value = val;
this.getValue = function(){
return value;
};
this.setValue = function(val){
value = val;
};
}
于是我們可以這樣使用：
代碼如下:
var field = new Field("test");
field.value
// => undefined
field.setValue("test2")
field.getValue()
// => "test2"
我們來(lái)模擬上例中的 “隱藏的value屬性”，我們的代碼就像這樣：
代碼如下:
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ǔ)法。
代碼如下:
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ì)象。
代碼如下:
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
代碼如下:
// 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，這將很有用。
