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 相关文章推荐
js 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
jQuery仿Excel表格编辑功能的实现代码
May 01 Javascript
js读取注册表的键值示例
Sep 25 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 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.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
PHP数组操作类实例
2015/07/11 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
jQuery 选择器详解
2015/01/19 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
js中new一个对象的过程
2017/02/20 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
Weex开发之地图篇的具体使用
2019/10/16 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
详解Python中的__new__()方法的使用
2015/04/09 Python
OpenCV 模板匹配
2019/07/10 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
结构和类有什么异同
2012/07/16 面试题
JAVA招聘远程笔试题
2015/07/23 面试题
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
公司财务自我评价分享
2013/12/17 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
搞笑老公保证书
2015/02/26 职场文书
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis