JavaScript Accessor实现说明

更新时间：2010年12月06日 21:34:41 作者：

关于Getter与Setter大家一定不会陌生,下面简单介绍几种我所知道的在JavaScript中实现G/S的方法.

第一种算是比较常见了,通过闭包Store Value从而实现accessor,适用于所有浏览器.

 
function Sandy(val){ 
var value = val; 
this.getValue = function(){ 
return value; 
}; 
this.setValue = function(val){ 
value = val; 
}; 
} 
//usage 
var sandy = new Sandy("test"); 
sandy.value 
// => undefined 
sandy.setValue("test2") 
sandy.getValue 

下面是JavaScript权威指南（中文第五版）中P152页使用闭包的一个例子.

复制代码代码如下:

 
function makeProperty(o, name, predicate) { 
var value; //This is property value; 

//The setter method simply returns the value 
o['get' + name] = function() { return value;}; 

//The getter method stores the value or throws an exception if 
//the predicate rejects the value 
o['set' + name] = function(v) { 
if (predicate && !predicate(v) { 
throw 'set' + name + ': invalid value ' + v; 
} else { 
value = y; 
} 
} 
} 

//The following code demenstrates the makeProperty() method 
var o = {}; // Here is an empty object 

//Add property accessor methods getName and setName 
//Ensure that only string values are allowed 
makeProperty(o, 'Name', function(x) { return typeof x == 'string'; }); 

o.setName('Frank'); 　　//Set the property value; 
print(o.getName()); 　　//Get the property value 
o.setName(0); //Try to set a value of the wrong type 

第二种方法是使用__defineSetter__与__defineGetter__来实现accessor,看下划线就知道它们并非标准,适用于Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+ 和 Opera 9.5+ ,方法使用见MDN.

复制代码代码如下:

 
function Sandy(val){ 
var value = val, 
_watch = function(newVal) { 
console.log('val is Changed to : ' + newVal); 
} 

this.__defineGetter__("value", function(){ 
return value; 
}); 

this.__defineSetter__("value", function(val){ 
value = val; 
_watch(val); 
}); 
} 

var sandy = new Sandy("test"); 
sandy.value 
// => test 
sandy.value = "test2"; 
// => 'val is Changed to : test2' 
sandy.value 
// => "test2" 

　除了__defineG/Setter__外, 你还可以使用'set'、'get'关键字在在原型对象上定义accessor,对于单个对象同样适用, 适用于Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+ 和 Opera 9.5+.

复制代码代码如下:

 
function Sandy(val){ 
this.value = val; 
} 

Sandy.prototype = { 
get value(){ 
return this._value; 
}, 
set value(val){ 
this._value = val; 
} 
}; 

//Or 

var sandy = { 
'_value' : 'sandy', 
get value() { 
　　return this._value; 
}, 
set value(val) { 
　　this._value = val; 
} 
} 

最后一种方法,用到了Object的静态方法defineProperty,作用于单个对象,该方法应该属于ES5的范畴了,目前似乎只有Chrome 支持这种方法，其实Ie8也支持,但操作对象仅限于Dom节点(Dom node),见IEBlog,该方法的使用见MDN.

复制代码代码如下:

 
var sandy = {}, rValue; 
Object.defineProperty(sandy, 'value' , 
{ 
'set' : function(val) { 
rValue = val; 
}, 
'get' : function() { 
return rValue; 
}, 
'enumerable' : true, 
'configurable' : true 
} 
) 
//Ie8+ 
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" 

‘enumerable','configuralbe' 属于ES5规范中的Property Attributes(属性特性),在这里就不做讨论了,有兴趣的Google或者直接去看ES5的文档. ^ ^

您可能感兴趣的文章:

javascript实现动态加载CSS
最近在做自己的小框架的按需加载模块，那么就需要做到异步动态加载css文件。仔细研究了一番，得到了如下解决方案，分享给大家。
2015-01-01
索趣科技的答案
索趣科技的答案...
2007-02-02
15条JavaScript最佳实践小结
如果你的JavaScript代码只是增加一些功能，那么尽管大胆地把文件引用放在HTML底部吧，你会看到明显的速度提升。本文总结了15条小建议，感兴趣的朋友可以参考下
2013-08-08
使用Typescript开发微信小程序的步骤详解
这篇文章主要介绍了使用Typescript开发微信小程序的步骤详解,本文分步骤通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-01-01
js实现翻页后保持checkbox选中状态的实现方法
在项目中有需求如下：上下分页后，选中的checkbox状态保持不变
2012-11-11
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
这篇文章主要介绍了BootStrap 智能表单实战系列(二)BootStrap支持的类型简介的相关资料，非常不错具有参考借鉴价值，感兴趣的朋友一起学习吧
2016-06-06
使用uniapp实现发布朋友圈功能
这篇文章主要介绍了使用uniapp实现发布朋友圈功能,在文章底部给大家介绍了uniapp 微信小程序分享、分享朋友圈功能，通过页内自定义分享按钮，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-09-09
JS焦点图,JS 多个页面放多个焦点图的实例
下面小编就为大家带来一篇JS焦点图,JS 多个页面放多个焦点图的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-12-12
xmlplus组件设计系列之树（Tree）（9）
xmlplus 是一个JavaScript框架，用于快速开发前后端项目。这篇文章主要介绍了xmlplus组件设计系列之tree，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
微信小程序实现一个简单swiper代码实例
这篇文章主要介绍了微信小程序实现一个简单swiper代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-12-12