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/lhb25/archive/2010/09/19/1830724.html