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 EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
深入理解Node.js的HTTP模块
Oct 12 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
10个最优秀的Node.js MVC框架
Aug 24 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
layui前端时间戳转化实例
Nov 15 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中设置index.php文件为只读的方法
2013/02/06 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
js选择器全面解析
2016/06/27 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
实现两个文本框同时输入的实例
2017/09/25 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
基于python select.select模块通信的实例讲解
2017/09/21 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
python程序输出无内容的解决方式
2020/04/09 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
python GUI计算器的实现
2020/10/09 Python
Timberland法国官网:购买靴子、鞋子、衣服、夹克和配饰
2019/11/30 全球购物
软件测试企业面试试卷
2016/07/13 面试题
教师见习报告范文
2014/11/03 职场文书
邀请函模板
2015/02/02 职场文书
解决go在函数退出后子协程的退出问题
2021/04/30 Golang