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禁用键盘功能键让右击及其他键无效
Oct 09 Javascript
javaScript的函数对象的声明详解
Feb 06 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
React.js中常用的ES6写法总结(推荐)
May 09 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 Javascript
js实现随机点名器精简版
Jun 29 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 Javascript
利用JavaScript写一个简单计算器
Nov 27 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脚本的10个技巧(8)
2006/10/09 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
javascript 常用方法总结
2009/06/03 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
python获取标准北京时间的方法
2015/03/24 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
python获取代理IP的实例分享
2018/05/07 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
财务会计毕业生自荐信
2013/11/02 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
优秀党员获奖感言
2014/02/18 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
理财学专业自荐书
2014/06/28 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
刑事上诉状范文
2015/05/22 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS