前两天IE9 Beta版发布了,对于从事Web开发的朋友们来说真是个好消息啊,希望将来有一天各个浏览器都能遵循统一的标准。今天要和大家分享的是JavaScript中的Get和Set访问器,和C#中的访问器非常相似。
标准的Get和Set访问器的实现
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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"
在如下浏览器能正常工作:
我们常用的实现方法可能是这样的:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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访问器的实现
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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访问器的实现
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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访问器的实现
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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
来源:http://www.cnblogs.com/lhb25/archive/2010/09/19/1830724.html