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 判断指定字符串是否为有效数字
May 11 Javascript
JavaScript 对象模型 执行模型
Oct 15 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 Javascript
jQuery事件用法详解
Oct 06 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
解决VueCil代理本地proxytable无效报错404的问题
Nov 07 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
安装APACHE
2007/01/15 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
实践Vim配置python开发环境
2018/07/02 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
Python如何存储数据到json文件
2020/03/09 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
python em算法的实现
2020/10/03 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
JAVA高级程序员面试题
2013/09/06 面试题
毕业生就业自荐信
2013/12/04 职场文书
商务会议邀请函
2014/01/09 职场文书
单位员工收入证明样本
2014/10/09 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS
box-shadow单边阴影的实现
2023/05/21 HTML / CSS