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"
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"
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";
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 : 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"
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世界。
參考文獻：
全站熱搜
留言列表
