JavaScript中的Get和Set访问器

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

时间: 2024-10-10 07:27:35

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

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

之前对get/set的理解一直有误,觉得get set 是对象属性方法.看了别人的博客也有很多疑问,今天系统的做了很多测试终于弄明白了.(自己通过看书和写demo测试的,如有不对欢迎大家批评指正) get/set访问器不是对象的属性,而是属性的特性.大家一定要分清楚.特性只有内部才用,因此在javaScript中不能直接访问他们.为了表示特性是内部值用两队中括号括起来表示如[[Value]].  1.先简单介绍一下属性的这些特性(这里是简单的背书)          (1)数据属性——包含一个数

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

演示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/jav

javascript中通用的事件侦听器函数

var EventUtil = { addHandler:function (element, type, handler) { if(element.addEventListener){ element.addEventListener(type,handler,false) }else if(element.attachEvent){ element.attachEvent('on'+type,handler) }else { element['on'+type] = handler; }

Javascript中值的访问与参数传递问题

数据类型 在 javascript 中数据类型可以分为两类: 原始数据类型值 primitive type,比如Undefined,Null,Boolean,Number,String. 引用类型值,也就是对象类型 Object type,比如Object,Array,Function,Date等. 声明变量时不同的内存分配 原始值:存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置.这是因为这些原始类型占据的空间是固定的,所以可将他们存储在较小的内存区域 – 栈中

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

1.基本数据类型和引用数据类型 ECMAScript包括两个不同类型的值:基本数据类型和引用数据类型. 基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构成的对象. 当我们把变量赋值给一个变量时,解析器首先要确认的就是这个值是基本类型值还是引用类型值. 2.常见的基本数据类型: Number.String .Boolean.Null和Undefined.基本数据类型是按值访问的,因为可以直接操作保存在变量中的实际值.示例: var a = 10; var b = a; b = 20;

【译】Javascript中的数据类型

这篇文章通过四种方式获取Javascript中的数据类型:通过隐藏的内置[[Class]]属性:通过typeof运算符:通过instanceof运算符:通过函数Array.isArray().我们也会看看原型对象的构造函数,可能会有意想不到的数据类型结果. [这篇文章是我在adobe发布的文章,我发布在这里只是为了存档.] 知识储备 在开始我们的话题之前,我们不得不复习一些所需的知识点 1.1 原始值和对象 Javascript中的数据,要么是原始值,要么是对象. 原始值.下面是原始值: und

Js中的数据属性和访问器属性

Js中的数据属性和访问器属性 在javaScript中,对象的属性分为两种类型:数据属性和访问器属性. 一.数据属性 1.数据属性:它包含的是一个数据值的位置,在这可以对数据值进行读写. 2.数据属性包含四个特性,分别是: configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为true enumerable:表示能否通过for-in循环返回属性 writable:表示能否修改属性的值 value:包含该属性的数据值.默

js中的访问器属性中的getter和setter函数实现数据双向绑定

嗯,之前在读js红宝书的时候,在对象那一章有介绍属性类型.第一种数据类型指的是数据属性,第二种是访问器属性.在初识vue的时候,其双向数据绑定也是基于访问器属性中的getter和setter函数原理来实现的.本篇文章就着重解析这两个函数的工作原理. 首先,我们先创建一个a对象,并给他定义了一个默认的属性_b,_b前面的下划线是一种常用的记号,用于表示只能通过对象方法访问的属性. var a={ _b=5;}; 接着定义一个属性为'c'的访问器属性,该属性包含一个get和set函数,get函数用来

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

ECMA-2把对象定义为:“无序属性的集合,其属性可以包含基本值.对象或者函数.” 严格来说,这就相当于说对象是一组没有特定顺序的值.对象的属性或方法都有一个名字,而每个名字映射到一个值.我们可以把ECMAScript的对象想象成散列表,无非就是一组名值对,其中值可以是数据或函数.(高程三 P139) [译]JavaScript中对象的属性   <高程三 P139 属性类型> JavaScript笔记--数据属性和访问器属性 JavaScript中有两种不同类型的属性:命名数据属性(named