JavaScript Accessor实现说明


Posted in Javascript onDecember 06, 2010

第一种算是比较常见了,通过闭包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 相关文章推荐
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
浅析js中的浮点型运算问题
Jan 06 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 Javascript
关于Javascript模块化和命名空间管理的问题说明
Dec 06 #Javascript
javascript处理table表格的代码
Dec 06 #Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 #Javascript
菜鸟javascript基础资料整理2
Dec 06 #Javascript
菜鸟javascript基础整理1
Dec 06 #Javascript
js 上传图片预览问题
Dec 06 #Javascript
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 #Javascript
You might like
基于文本的访客签到簿
2006/10/09 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
Python合并多个装饰器小技巧
2015/04/28 Python
python中enumerate函数遍历元素用法分析
2016/03/11 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
python版本单链表实现代码
2018/09/28 Python
python截取两个单词之间的内容方法
2018/12/25 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
服装区域经理岗位职责
2015/04/10 职场文书
一个都不能少观后感
2015/06/04 职场文书
泰坦尼克号观后感
2015/06/04 职场文书