网络之美 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 相关文章推荐
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
JS验证码实现代码
Sep 14 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
vuejs简单验证码功能完整示例
Jan 08 Javascript
详解Angular cli配置过程记录
Nov 07 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 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
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
JavaScript DOM基础
2015/04/13 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
Python日志模块logging简介
2015/04/13 Python
使用Python的判断语句模拟三目运算
2015/04/24 Python
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
python numpy 反转 reverse示例
2019/12/04 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
python实现局域网内实时通信代码
2019/12/22 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
学院书画协会部门岗位职责
2013/12/01 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
道歉的话怎么说
2015/05/12 职场文书
大学生军训感言
2015/08/01 职场文书
2015年高中语文教学总结
2015/08/18 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL