网络之美 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 相关文章推荐
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
Dec 06 Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
Apr 01 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
jQuery手风琴的简单制作
May 12 jQuery
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
JavaScript文档对象模型DOM
Nov 20 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批量生成随机用户名
2008/07/10 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
javascript异步编程的4种方法
2014/02/19 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
Python 获取div标签中的文字实例
2018/12/20 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
python保留小数位的三种实现方法
2020/01/07 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
艺术设计专业个人求职信范文
2013/12/11 职场文书
关于元旦的广播稿
2014/02/16 职场文书
培训专员岗位职责
2014/02/26 职场文书
英语故事演讲稿
2014/04/29 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
员工评语范文
2014/12/31 职场文书
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server