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 disabled="false"不起作用的解决办法
Jun 26 Javascript
jquery cookie实现的简单换肤功能适合小网站
Aug 25 Javascript
Javascript实现计算个人所得税
May 10 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
Aug 06 Javascript
用JS创建一个录屏功能
Nov 11 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
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
php实现mysql封装类示例
2014/05/07 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
php fread函数使用方法总结
2019/05/28 PHP
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
ES6 十大特性简介
2020/12/09 Javascript
python简单实现获取当前时间
2016/08/27 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
python实现简易数码时钟
2021/02/19 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
python实现月食效果实例代码
2019/06/18 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
Python request中文乱码问题解决方案
2020/09/17 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
意大利网上药房:Farmacia 33
2020/01/27 全球购物
上班睡觉检讨书
2014/01/09 职场文书
公司门卫管理制度
2014/02/01 职场文书
2014村务公开实施方案
2014/02/25 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
大气污染防治方案
2014/05/19 职场文书
党员演讲稿
2014/09/04 职场文书
医学检验专业自荐信
2014/09/18 职场文书
思想政治表现评语
2015/01/04 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
Python OpenCV实现图像模板匹配详解
2022/04/07 Python
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL