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 each()方法的使用方法
Mar 18 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
javascript修改图片src的方法
Jan 27 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
js实现图片无缝循环轮播
Oct 28 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 return语句另类用法不止是在函数中
2014/09/17 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
常用的javascript function代码
2008/05/23 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
python如何将图片转换为字符图片
2020/08/19 Python
python re模块的高级用法详解
2018/06/06 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
全球虚拟主机商:HostGator
2017/02/06 全球购物
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
红领巾心向党广播稿
2014/01/19 职场文书
销售求职信范文
2014/05/26 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
党员个人总结自评
2015/02/14 职场文书
工商局个人工作总结
2015/03/03 职场文书
《风筝》教学反思
2016/02/23 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
java泛型通配符详解
2021/07/25 Java/Android
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL