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 相关文章推荐
javascript实现二分查找法实现代码
Nov 12 Javascript
JavaScript this 深入理解
Jul 30 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
老生常谈ES6中的类
Jul 31 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
小程序实现抽奖动画
Apr 16 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 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开发需要注意的安全问题
2010/09/01 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
JavaScript 应用类库代码
2008/06/02 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
Python端口扫描简单程序
2016/11/10 Python
python 解压pkl文件的方法
2018/10/25 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
Django--权限Permissions的例子
2019/08/28 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
爱国主义演讲稿
2014/05/07 职场文书
小学班长竞选稿
2015/11/20 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技