網路之美：JavaScript中Get和Set訪問器的實現

　　前兩天IE9 Beta版發布了，對於從事Web開發的朋友們來說真是個好訊息啊，希望將來有一天各個瀏覽器都能遵循統一的標準。今天要和大家分享的是JavaScript中的Get和Set訪問器，和C#中的訪問器非常相似。

 

 標準的Get和Set訪問器的實現

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"

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

我們常用的實現方法可能是這樣的：

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訪問器的實現

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實現訪問器

　　將來ECMAScript標準的擴充項物件的方法會通過Object.defineProperty來實現，這也是為什麼IE8就是通過這種方法來實現get和set訪問器，看來微軟還是很有遠見的，遺憾的是目前只有IE8+和Chrome 5.0+支援，其它的瀏覽器都不支援，而且IE8+也只支援DOM元素，不過將來的版本將和Chrome一樣支援普通的Javascript對象。

DOM元素上的Get和Set訪問器的實現

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訪問器的實現

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"

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

 

本文總結

　　儘管微軟的IE只是支援了Object.defineProperty，沒有完美的實現Get和Set訪問器，但是我們已經看到了IE有了很大的進步，特別是剛發布的IE9使用的新的javascript引擎，支援HTML5和CSS3，支援硬體加速等等，相信有一天各個瀏覽器都能完全擁抱標準，帶來一個完美的WEB世界。

 

參考文獻：

1. Getters and setters with JavaScript

2. JavaScript Getters and Setters