网络之美 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 相关文章推荐
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
jquery mobile开发常见问题分析
Jan 21 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
Javascript中的arguments对象
Jun 20 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
Node.js操作系统OS模块用法分析
Jan 04 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之第十天
2006/10/09 PHP
linux iconv方法的使用
2011/10/01 PHP
超级实用的7个PHP代码片段分享
2012/01/05 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
vue多次循环操作示例
2019/02/08 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
Python实现批量压缩图片
2018/01/25 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
python实现智能语音天气预报
2019/12/02 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
Django封装交互接口代码
2020/07/12 Python
10个示例带你掌握python中的元组
2020/11/23 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
新媒传信软件测试面试题
2013/02/24 面试题
犯错检讨书
2014/02/21 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
管理失职检讨书
2015/05/05 职场文书
名人传读书笔记
2015/06/26 职场文书
Go 语言中 20 个占位符的整理
2021/10/16 Golang