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与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
基于jquery的大众点评,分类导航实现代码
Aug 23 Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
原生JS实现左右箭头选择日期实例代码
Mar 14 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
JavaScript函数绑定用法实例分析
Nov 14 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
php 用sock技术发送邮件的函数
2007/07/21 PHP
PHP类中Static方法效率测试代码
2010/10/17 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
PHP chr()函数讲解
2019/02/11 PHP
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
js自定义事件代码说明
2011/01/31 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
django自定义模板标签过程解析
2019/12/14 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
python 代码运行时间获取方式详解
2020/09/18 Python
Python 列表反转显示的四种方法
2020/11/16 Python
十一个高级MySql面试题
2014/10/06 面试题
全国税务系统先进集体事迹材料
2014/05/19 职场文书
党员承诺书格式
2014/05/21 职场文书
师范毕业生求职信
2014/07/11 职场文书
地震捐款倡议书
2014/08/29 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript