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 相关文章推荐
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
在vue里面设置全局变量或数据的方法
Mar 09 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
layui框架与SSM前后台交互的方法
Sep 12 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文件系统管理(实例讲解)
2017/09/19 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
python动态性强类型用法实例
2015/05/09 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
生物科学专业个人求职信范文
2013/12/07 职场文书
音乐教育感言
2014/03/05 职场文书
团队拓展活动总结
2014/08/27 职场文书
标准单位租车协议书
2014/09/23 职场文书
防灾减灾标语
2014/10/07 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
协议书范文
2015/01/27 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS