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世界。

参考文献:

1. Getters and setters with JavaScript

2. JavaScript Getters and Setters




本文转自钢钢博客园博客,原文链接:http://www.cnblogs.com/xugang/archive/2010/09/20/1831919.html,如需转载请自行联系原作者

相关文章
|
8天前
|
Java Maven Spring
【SpringBug】lombok插件失效,但是没有报错信息,@Data不能生成get和set方法
解决写了@Data注解,但是在测试文件中生成的反编译target文件Us二Info中没有get和set方法
|
2月前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
2月前
|
Java Windows
IDEA不使用lombok,如何快速生成get和set方法
【11月更文挑战第10天】在 IntelliJ IDEA 中生成 `get` 和 `set` 方法有多种方式:通过菜单操作、使用快捷键或自定义模板。菜单操作包括选择“Code”菜单中的“Generate...”,快捷键为“Alt + Insert”。自定义模板可在“File”->“Settings”->“Editor”->“Code Style”->“Java”中设置。批量生成时,可多选变量一次性生成。
|
2月前
|
JavaScript 前端开发 Java
除了 JavaScript,还有哪些编程语言支持 Set 类型
【10月更文挑战第30天】这些编程语言中的 `Set` 类型虽然在语法和具体实现细节上有所不同,但都提供了类似的集合操作功能,方便开发者在不同的编程场景中处理集合相关的数据和逻辑。
|
3月前
|
JavaScript
Node.js GET/POST请求
10月更文挑战第6天
44 2
Node.js GET/POST请求
|
3月前
|
C#
SET访问器和GET访问器
SET访问器和GET访问器
39 2
|
4月前
|
存储 JavaScript 前端开发
js的map和set |21
js的map和set |21
|
4月前
|
JavaScript 前端开发 索引
JavaScript基础知识-数组基于索引访问
关于JavaScript数组基于索引访问的基础知识介绍。
29 1
JavaScript基础知识-数组基于索引访问
|
4月前
|
JavaScript 前端开发
JavaScript 中的新 Set 方法
JavaScript 中的新 Set 方法
30 1
|
5月前
|
API
【Azure Key Vault】.NET 代码如何访问中国区的Key Vault中的机密信息(Get/Set Secret)
【Azure Key Vault】.NET 代码如何访问中国区的Key Vault中的机密信息(Get/Set Secret)