JavaScript中setter和getter方法介绍

 更新时间:2016年07月11日 10:01:54   投稿:mrr  
这篇文章主要介绍了JavaScript中setter和getter方法介绍的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

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验证函数收集

    经常用到的javascript验证函数收集...
    2007-11-11
  • javascript实现fetch请求返回的统一拦截

    javascript实现fetch请求返回的统一拦截

    这篇文章主要介绍了javascript实现fetch请求返回的统一拦截,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • JavaScript实现点击文本自动定位到下拉框选中操作

    JavaScript实现点击文本自动定位到下拉框选中操作

    这篇文章主要介绍了JavaScript实现点击文本自动定位到下拉框选中操作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • JavaScript判断奇偶数的2种方法代码举例

    JavaScript判断奇偶数的2种方法代码举例

    这篇文章主要给大家介绍了关于JavaScript判断奇偶数的2种方法,奇数和偶数的判断是数学运算中经常碰到的问题,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • weakMap为什么是弱引用原理

    weakMap为什么是弱引用原理

    这篇文章主要为大家介绍了weakMap为什么是弱引用原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • 利用uniapp+vue3+js适配微信隐私协议开发指南

    利用uniapp+vue3+js适配微信隐私协议开发指南

    这篇文章主要给大家介绍了关于利用uniapp+vue3+js适配微信隐私协议开发指南的相关资料,适配最新微信小程序隐私协议开发指南,兼容uniapp版本,需要的朋友可以参考下
    2023-12-12
  • Uniapp自定义导航栏并自适应机型的实现方法

    Uniapp自定义导航栏并自适应机型的实现方法

    Uniapp 是一款跨平台开发框架,可以同时开发出可以在多个平台上运行的应用,在开发过程中,我们常常需要自定义导航栏来满足 UI 设计的需求,本文将介绍如何在 Uniapp 中自定义导航栏并自适应不同机型的屏幕大小,需要的朋友可以参考下
    2023-09-09
  • 基于Javascript实现弹出页面效果

    基于Javascript实现弹出页面效果

    弹出层效果是一个很实用的功能,很多网站都采用了这种方式实现登录和注册,下面小编通过本文给大家分享具体实现代码,对js弹出页面效果相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • 如何选择适合你的JavaScript框架

    如何选择适合你的JavaScript框架

    这篇文章主要介绍了如何选择适合你的JavaScript框架,如何选择一个高效的JS框架经验之谈。
    2017-11-11
  • sencha ext js 6 快速入门(必看)

    sencha ext js 6 快速入门(必看)

    下面小编就为大家带来一篇sencha ext js 6 快速入门(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06

最新评论