网络之美 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的公告无限循环滚动实现代码
May 11 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
js操作数组函数实例小结
Dec 10 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
小程序实现列表倒计时功能
Jan 29 Javascript
vue实力踩坑之push当前页无效
Apr 10 Vue.js
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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
php中设置多级目录session的问题
2011/08/08 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
浅谈js中的bind
2019/03/18 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
Python的Urllib库的基本使用教程
2015/04/30 Python
Python中的urllib模块使用详解
2015/07/07 Python
Python中文编码知识点
2019/02/18 Python
Python如何用filter函数筛选数据
2020/03/05 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
安全生产检讨书
2014/01/21 职场文书
元旦晚会策划方案
2014/02/18 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
扬州个园导游词
2015/02/06 职场文书
使用scrapy实现增量式爬取方式
2022/06/21 Python