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 相关文章推荐
jQuery 表单验证扩展(三)
Oct 20 Javascript
jQuery 源码分析笔记(3) Deferred机制
Jun 19 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
JavaScript中的类型检查
Feb 03 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 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
php利用单例模式实现日志处理类库
2014/02/10 PHP
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
javascript 自动转到命名锚记
2009/01/10 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
韩国11街:11STREET
2018/03/27 全球购物
英国行业制服供应商:Alexandra
2019/09/14 全球购物
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
上班看电影检讨书
2014/02/12 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js
css3 选择器
2022/05/11 HTML / CSS