今天要和大家分享的是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

JavaScript中的Get和Set访问器的更多相关文章

  1. JavaScript 属性类型(数据属性和访问器属性)

    数据属性 数据属性包含一个数据值的位置.在这个位置可以读取和写入值.数据属性有 4 个描述其行为的特性. [[Configurable]]:表示能否通过 delete 删除属性从而重新定义属性,能否修 ...

  2. JavaScript ECAMScript5 新特性——get/set访问器

    之前对get/set的理解一直有误,觉得get set 是对象属性方法.看了别人的博客也有很多疑问,今天系统的做了很多测试终于弄明白了.(自己通过看书和写demo测试的,如有不对欢迎大家批评指正) g ...

  3. C#中的GET和SET访问器

    我们在学习C#语法的属性时,都要首先和GET,SET访问器打交道,从英文的字面意思上理解,GET应该就是获得什么什么,而SET应该是设置什么什么,那我们看一下,官方是怎么定义这对访问器的:get是读取 ...

  4. JavaScript中的直接量与初始器的区别

    很多代码优化及公司规范都会提到 写对象不应该 var obj = new Object() 而应该 var obj = {} 写数组不应该 var arr = new Array() 而应该 var ...

  5. 在JavaScript中使用json.js:访问JSON编码的某个值

    演示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  6. javascript 对象属性的get set访问器写法

    function Person() {     var age = new Date().getFullYear() - 18;     Object.defineProperty(this, &qu ...

  7. JavaScript中基本数据类型和引用数据类型的区别

    1.基本数据类型和引用数据类型 ECMAScript包括两个不同类型的值:基本数据类型和引用数据类型. 基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构成的对象. 当我们把变量赋值给一个变 ...

  8. JavaScript中基本数据类型和引用数据类型的区别(栈——堆)

    JavaScript中基本数据类型和引用数据类型的区别 1.基本数据类型和引用数据类型 ECMAScript包括两个不同类型的值:基本数据类型和引用数据类型. 基本数据类型指的是简单的数据段,引用数据 ...

  9. 【译】Javascript中的数据类型

    这篇文章通过四种方式获取Javascript中的数据类型:通过隐藏的内置[[Class]]属性:通过typeof运算符:通过instanceof运算符:通过函数Array.isArray().我们也会 ...

随机推荐

  1. Android_ _开发技巧总结

    ===  1   1.对于过多的控件,功能类似,数量又多的,可以用include方法.在实现应用中,可以把控件放入List集合中. private void initView() { // TODO ...

  2. 使用JMeter创建FTP测试计划

    FTP服务主要提供上传和下载功能.有时间需要我们测试服务器上传和下载的性能.在这里我通过JMeter做一个FTP测试计划的例子. 当然,JMeter官方网站的用户手册也有例子,但由于版本较早,我也算是 ...

  3. 关于 MySQL UTF8 编码下生僻字符插入失败/假死问题的分析

    原文:http://my.oschina.net/leejun2005/blog/343353 目录[-] 1.问题:mysql 遇到某些中文插入异常 2.原因:此 utf8 非彼 utf8 3.解决 ...

  4. Python基础09 面向对象的进一步拓展

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 我们熟悉了对象和类的基本概念.我们将进一步拓展,以便能实际运用对象和类. 调用类的 ...

  5. git简单使用和说明文件的书写

    一. git 简单使用 1.注册 https://github.com/ 2.初始化 配置 git config --global user.name "Your Name" gi ...

  6. Microsoft Visual C++ 2015 Redistributable(x64) - 14.0.2306 设置失败

    想要在Windows 2008 R2 中 安装PHP, 需要安装 Microsoft Visual C++ 2015 Redistributable(x64) ,结果提供设置失败. 先中找到以下文字, ...

  7. Angularjs路由.让人激动的技术.真给前端长脸了.

    先看文件的摆放 不废话,直接上代码. detail.html: <hr/> <h3>路由 <span style="color: red;">{ ...

  8. HDU 3068 [最长回文子串]

    #include<iostream> #include<string> #include<string.h> #include<algorithm> # ...

  9. poj 1258 Agri-Net 最小生成树 kruskal

    点击打开链接 Agri-Net Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 33733   Accepted: 13539 ...

  10. java常用面板

    public class JPanelTest extends JFrame{    public JPanelTest(){        Container c=getContentPane(); ...