JavaScript中Get和Set访问器的实现
前两天IE9 Beta版发布了，对于从事Web开发的朋友们来说真是个好消息啊，希望将来有一天各个浏览器都能遵循统一的标准。今天要和大家分享的是JavaScript中Get和Set访问器，和C#中的访问器非常相似。
标准的Get和Set访问器的实现
01 |
function Field(val){ |
02 |
this.value = val; |
03 |
} |
04 |
Field.prototype = { |
05 |
get value(){ |
06 |
return this._value; |
07 |
}, |
08 |
set value(val){ |
09 |
this._value = val; |
10 |
} |
11 |
}; |
12 |
var field = new Field("test"); |
13 |
field.value="test2"; |
14 |
//field.value will now return "test2" |
在如下浏览器能正常工作：
我们常用的实现方法可能是这样的：
01 |
function Field(val){ |
02 |
var value = val; |
03 |
|
04 |
this.getValue = function(){ |
05 |
return value; |
06 |
}; |
07 |
|
08 |
this.setValue = function(val){ |
09 |
value = val; |
10 |
}; |
11 |
} |
12 |
var field = new Field("test"); |
13 |
field.setValue("test2") |
14 |
field.getValue() // return "test2" |
在DOM元素上Get和Set访问器的实现
1 |
HTMLElement.prototype.__defineGetter__("description", function () { |
2 |
return this.desc; |
3 |
}); |
4 |
HTMLElement.prototype.__defineSetter__("description", function (val) { |
5 |
this.desc = val; |
6 |
}); |
7 |
document.body.description = "Beautiful body"; |
8 |
// 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访问器的实现
01 |
Object.defineProperty(document.body, "description", { |
02 |
get : function () { |
03 |
return this.desc; |
04 |
}, |
05 |
set : function (val) { |
06 |
this.desc = val; |
07 |
} |
08 |
}); |
09 |
document.body.description = "Content container"; |
10 |
|
11 |
// document.body.description will now return "Content container" |
在如下浏览器能正常工作：
普通对象的Get和Set访问器的实现
01 |
var lost = { |
02 |
loc : "Island" |
03 |
}; |
04 |
Object.defineProperty(lost, "location", { |
05 |
get : function () { |
06 |
return this.loc; |
07 |
}, |
08 |
set : function (val) { |
09 |
this.loc = val; |
10 |
} |
11 |
}); |
12 |
lost.location = "Another island"; |
13 |
// 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
