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 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
javascript基础的动画教程,直观易懂
Jan 10 Javascript
JQuery 绑定事件时传递参数的实现方法
Oct 13 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
JavaScript中的函数式编程详解
Aug 22 Javascript
vue v-model的用法解析
Oct 19 Javascript
浅谈react路由传参的几种方式
Mar 23 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
Yii2.0中使用js异步删除示例
2017/03/10 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
极简主义法编写JavaScript类
2017/11/02 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
Python计算IV值的示例讲解
2020/02/28 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
幼儿园中班新学期寄语
2014/01/18 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
高中社区服务活动报告
2015/02/05 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android