网络之美 JavaScript中Get和Set访问器的实现代码
更新时间：2010年09月19日 22:53:27 作者：
前两天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(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"
在如下浏览器能正常工作：
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"
在如下浏览器能正常工作：
复制代码 代码如下:
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"
在如下浏览器能正常工作：
复制代码 代码如下:
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
作者：梦想
相关文章
这篇文章主要介绍了JS根据生日月份和日期计算星座的简单实现方法,涉及javascript日期时间与字符串操作相关技巧,需要的朋友可以参考下2016-11-11
使用getBoundingClientRect方法实现简洁的sticky组件的方法
本文介绍这种组件的实现思路，并提供一个同时支持将sticky元素固定在顶部或底部的具体实现，由于这种组件在网站中非常常见，所以有必要掌握它的实现方式，以便在有需要的时候基于它的思路写出功能更多的组件出来2016-03-03
这篇文章主要介绍了JavaScript中eval函数的问题,需要的朋友可以参考下2016-01-01
本文主要介绍了js原型对象和原型链的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
forms 返回一个集合包含了了当前文档中的所有form元素，下面通过示例为大家介绍下document.forms用法,需要的朋友可以参考下2014-06-06
这篇文章主要介绍了js select支持手动输入实现代码,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了js调出上下文菜单的实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-12-12
项目中需要FusionCharts图表显示双Y轴，好像FCF_MSLine.swf不可以这样，只能显示一个Y轴，多条线,找了一下，用MSCombiDY2D.swf可以实现,现在晒出来和大家分享一下2012-11-11
下面小编就为大家带来一篇浅谈javascript中遇到的字符串对象处理。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
验证码验证是网页常出现的一个验证点，所谓验证码类型有很多，下面代码只是实现一个简单的验证功能，需要的朋友参考下2017-02-02
最新评论