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截取字符串的两种方法及区别详解
Nov 05 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
【js设计模式】SOLID五大设计原则
Mar 24 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
Discuz 模板引擎的封装类代码
2008/07/18 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
js实现仿购物车加减效果
2017/03/01 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
vue-router 按需加载 component: () => import() 报错的解决
2020/09/22 Javascript
python验证码识别的实例详解
2016/09/09 Python
python3安装speech语音模块的方法
2018/12/24 Python
python学生管理系统学习笔记
2019/03/19 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
Python创建自己的加密货币的示例
2021/03/01 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
英文版餐饮运营管理求职信
2013/11/06 职场文书
护校行动方案
2014/05/31 职场文书
期末个人总结范文
2015/02/13 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书