JavaScript中setter和getter方法介绍


Posted in Javascript onJuly 11, 2016

javascript中的setter、getter是平时接触比较少的方法,其本身也并不是标准方法,只在非ie浏览器里支持(ie内核也许有其他方法可以做到呢?暂时不知其解),但是加以利用可以做许多事情,比如:

1、对数据的访问限制:

a.value是对value变量的getter方法调用,如果在getter方法实现中抛出异常,可以阻止对value变量的访问

2、对dom变量进行监听:

window.name是一个跨域非常好用的dom属性(大名鼎鼎,详见百度),如果覆盖window.name的setter实现则可以实现跨页面的内存异步通信

3、自己发挥想象力,能做的事情好多滴

以下皆转:
首先,我们先来快速了解什么是Getters和Setters,以及它们为什么很有用。然后,我们来看看现在都有哪些平台支持Gettets和Setters。

Getters和Setters

Getters和Setters使你可以快速获取或设置一个对象的数据。一般来说,一个对象拥有两个方法,分别用于获取和设置某个值,比如:

{
getValue: function(){
return this._value;
},
setValue: function(val){
this._value = val;
}
}

用这种方式写JavaScript的一个明显的好处是:你可以用它来隐藏那些不想让外界直接访问的属性。最终的代码看起来就像下面这样(用闭包保存新创建的Filed对象的value):

function Field(val){
var value = val;
this.getValue = function(){
return value;
};
this.setValue = function(val){
value = val;
};
}

于是我们可以这样使用:

var field = new Field("test");
field.value
// => undefined
field.setValue("test2")
field.getValue()
// => "test2"

我们来模拟上例中的 “隐藏的value属性”,我们的代码就像这样:

function Field(val){
var value = val;
this.__defineGetter__("value", function(){
return value;
});
this.__defineSetter__("value", function(val){
value = val;
});
}

但是呢,你不喜欢这样写,而倾向在对象的prototype中定义getters和setters(私有变量写在哪并不重要),我们可以用另一种语法。

function Field(val){
this.value = val;
}
Field.prototype = {
get value(){
return this._value;
},
set value(val){
this._value = val;
}
};

这种语法看起来很不可思议,但是使用过一段时间之后,接受它也很容易。

接下来是另一个例子,它允许外界获取一个username数组,但是却不能获取原始的,隐藏的user对象。

function Site(users){
this.__defineGetter__("users", function(){
// JS 1.6 Array map()
return users.map(function(user){
return user.name;
});
};
}

记住以下几点:

一个对象内,每个变量只能有一个getter或setter。(因此value可以有一个getter和一个setter,但是value绝没有两个getters)
删除getter或setter的唯一方法是:delete object[name]。delete可以删除一些常见的属性,getters和setters。
如果使用__defineGetter__或__defineSetter__,它会重写之前定义的相同名称的getter或setter,甚至是属性(property)。

平台

支持的浏览器有:

Firefox
Safari 3+
Opera 9.5

以上所述是小编给大家介绍的JavaScript中setter和getter方法介绍的全部叙述,希望对大家有所帮助,如果大家想了解更多内容,敬请关注三水点靠木。

Javascript 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
javascript add event remove event
Apr 07 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
js自定义回调函数
Dec 13 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
angularjs中的$eval方法详解
Apr 24 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 #Javascript
仿百度换肤功能的简单实例代码
Jul 11 #Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 #Javascript
全面理解闭包机制
Jul 11 #Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 #Javascript
利用css+原生js制作简单的钟表
Apr 07 #Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 #Javascript
You might like
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
js实现的网页颜色代码表全集
2007/07/17 Javascript
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
Js获取事件对象代码
2010/08/05 Javascript
javascript天然的迭代器
2010/10/29 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
你必须知道的Javascript知识点之"this指针"的应用
2013/04/23 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
2017/07/13 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
python读取二进制mnist实例详解
2017/05/31 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
越南综合购物网站:Lazada越南
2019/06/10 全球购物
丧事主持词大全
2014/04/02 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
市场营销计划书
2015/01/17 职场文书
采购内勤岗位职责
2015/04/13 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫