网络之美：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世界。

 

作者：梦想
出处：http://www.cnblogs.com/lhb25
欢迎转载，请在文章页面明显位置给出原文链接。