快捷導(dǎo)航

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

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

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

標(biāo)準(zhǔn)的Get和Set訪問器的實(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訪問器的實(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"; 

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

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

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

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

普通對象的Get和Set訪問器的實(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，沒有完美的實(shí)現(xiàn)Get和Set訪問器，但是我們已經(jīng)看到了IE有了很大的進(jìn)步，特別是剛發(fā)布的IE9使用的新的javascript引擎，支持HTML5和CSS3，支持硬件加速等等，相信有一天各個(gè)瀏覽器都能完全擁抱標(biāo)準(zhǔn)，帶來一個(gè)完美的WEB世界。

參考文獻(xiàn)：

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

作者：夢想

您可能感興趣的文章: