JavaScript中Get和Set访问器的三种实现方式详解

JavaScript中Get和Set访问器的三种实现方式详解

本文介绍标准的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元素访问器实现

接下来探讨在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方法应用

利用Object.defineProperty方法来实现访问器是未来的趋势。

未来ECMAScript标准扩展对象的方法将通过Object.defineProperty来实现。这也是为什么IE8通过这种方法来实现get和set访问器的原因，可见微软具有前瞻性。遗憾的是，目前仅有IE8+和Chrome 5.0+支持此特性，其他浏览器尚不支持。此外，IE8+仅支持DOM元素，但未来版本预计将像Chrome一样支持普通JavaScript对象。

 
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 作者：梦想