您的位置:知识库 » Web前端

JavaScript中Get和Set访问器的实现

作者: 梦想  来源: 博客园  发布时间: 2010-09-21 21:44  阅读: 8576 次  推荐: 1   原文链接   [收藏]  
摘要:前两天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

1
0
标签:JavaScript

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻