網(wǎng)絡(luò)之美 JavaScript中Get和Set訪問(wèn)器的實(shí)現(xiàn)代碼

更新時(shí)間：2010年09月19日 22:53:27 作者：

前兩天IE9 Beta版發(fā)布了，對(duì)于從事Web開(kāi)發(fā)的朋友們來(lái)說(shuō)真是個(gè)好消息啊，希望將來(lái)有一天各個(gè)瀏覽器都能遵循統(tǒng)一的標(biāo)準(zhǔn)。今天要和大家分享的是JavaScript中的Get和Set訪問(wèn)器，和C#中的訪問(wèn)器非常相似。

標(biāo)準(zhǔn)的Get和Set訪問(wèn)器的實(shí)現(xiàn)

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

 
function Field(val){ 
this.value = val; 
} 
Field.prototype = { 
get value(){ 
return this._value; 
}, 
set value(val){ 
this._value = val; 
} 
}; 
var field = new Field("test"); 
field.value="test2"; 
//field.value will now return "test2" 

在如下瀏覽器能正常工作：

我們常用的實(shí)現(xiàn)方法可能是這樣的：

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

 
function Field(val){ 
var value = val; 

this.getValue = function(){ 
return value; 
}; 

this.setValue = function(val){ 
value = val; 
}; 
} 
var field = new Field("test"); 
field.setValue("test2") 
field.getValue() // return "test2" 

在DOM元素上Get和Set訪問(wèn)器的實(shí)現(xiàn)

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

 
HTMLElement.prototype.__defineGetter__("description", function () { 
return this.desc; 
}); 
HTMLElement.prototype.__defineSetter__("description", function (val) { 
this.desc = val; 
}); 
document.body.description = "Beautiful body"; 
// document.body.description will now return "Beautiful body"; 

在如下瀏覽器能正常工作：

通過(guò)Object.defineProperty實(shí)現(xiàn)訪問(wèn)器

　　將來(lái)ECMAScript標(biāo)準(zhǔn)的擴(kuò)展對(duì)象的方法會(huì)通過(guò)Object.defineProperty來(lái)實(shí)現(xiàn)，這也是為什么IE8就是通過(guò)這種方法來(lái)實(shí)現(xiàn)get和set訪問(wèn)器，看來(lái)微軟還是很有遠(yuǎn)見(jiàn)的，遺憾的是目前只有IE8+和Chrome 5.0+支持，其它的瀏覽器都不支持，而且IE8+也只支持DOM元素，不過(guò)將來(lái)的版本將和Chrome一樣支持普通的Javascript對(duì)象。
DOM元素上的Get和Set訪問(wèn)器的實(shí)現(xiàn)

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

 
Object.defineProperty(document.body, "description", { 
get : function () { 
return this.desc; 
}, 
set : function (val) { 
this.desc = val; 
} 
}); 
document.body.description = "Content container"; 
// document.body.description will now return "Content container" 

在如下瀏覽器能正常工作：

普通對(duì)象的Get和Set訪問(wèn)器的實(shí)現(xiàn)

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

 
var lost = { 
loc : "Island" 
}; 
Object.defineProperty(lost, "location", { 
get : function () { 
return this.loc; 
}, 
set : function (val) { 
this.loc = val; 
} 
}); 
lost.location = "Another island"; 
// lost.location will now return "Another island" 

在如下瀏覽器能正常工作：

本文總結(jié)

　　盡管微軟的IE只是支持了Object.defineProperty，沒(méi)有完美的實(shí)現(xiàn)Get和Set訪問(wèn)器，但是我們已經(jīng)看到了IE有了很大的進(jìn)步，特別是剛發(fā)布的IE9使用的新的javascript引擎，支持HTML5和CSS3，支持硬件加速等等，相信有一天各個(gè)瀏覽器都能完全擁抱標(biāo)準(zhǔn)，帶來(lái)一個(gè)完美的WEB世界。

參考文獻(xiàn)：

1. Getters and setters with JavaScript
2. JavaScript Getters and Setters

作者：夢(mèng)想

您可能感興趣的文章: