网络之美 JavaScript中Get和Set访问器的实现代码


Posted in Javascript onSeptember 19, 2010

标准的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"

在如下浏览器能正常工作:

网络之美 JavaScript中Get和Set访问器的实现代码

我们常用的实现方法可能是这样的:

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";

在如下浏览器能正常工作:

网络之美 JavaScript中Get和Set访问器的实现代码

 

通过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"

在如下浏览器能正常工作:

网络之美 JavaScript中Get和Set访问器的实现代码

普通对象的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"

在如下浏览器能正常工作:

网络之美 JavaScript中Get和Set访问器的实现代码

本文总结

尽管微软的IE只是支持了Object.defineProperty,没有完美的实现Get和Set访问器,但是我们已经看到了IE有了很大的进步,特别是刚发布的IE9使用的新的javascript引擎,支持HTML5和CSS3,支持硬件加速等等,相信有一天各个浏览器都能完全拥抱标准,带来一个完美的WEB世界。

参考文献:

1. Getters and setters with JavaScript
2. JavaScript Getters and Setters

作者:梦想

Javascript 相关文章推荐
jquery插件 cluetip 关键词注释
Jan 12 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
jquery等待效果示例
May 01 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
js中如何完美的解析数据
Mar 18 Javascript
微信小程序实现左侧滑动导航栏
Apr 08 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 #Javascript
jquery异步循环获取功能实现代码
Sep 19 #Javascript
JavaScript随机排序(随即出牌)
Sep 17 #Javascript
js下通过getList函数实现分页效果的代码
Sep 17 #Javascript
前端开发的开始---基于面向对象的Ajax类
Sep 17 #Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
Sep 17 #Javascript
js下用eval生成JSON对象
Sep 17 #Javascript
You might like
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
简单使用Python自动生成文章
2014/12/25 Python
python3操作mysql数据库的方法
2017/06/23 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
Numpy掩码式数组详解
2018/04/17 Python
Python之时间和日期使用小结
2019/02/14 Python
Python常见的pandas用法demo示例
2019/03/16 Python
详解python中递归函数
2019/04/16 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
python中entry用法讲解
2020/12/04 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
集体婚礼证婚词
2014/01/13 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
敬老模范事迹
2014/05/21 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
2014年团支部工作总结
2014/11/17 职场文书
单位接收函范文
2015/01/30 职场文书
工程项目经理岗位职责
2015/02/02 职场文书