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


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值