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方法介绍的全部叙述，希望对大家有所帮助，如果大家想了解更多内容，敬请关注我们。

赞 (0)

相关推荐

  • Javascript中的getter和setter初识

    前言 本文主要给大家介绍的关于Javascript中getter和setter的相关内容,第一次听说这个东西的时候是vue.js里面的数据绑定,只要绑定了数据,修改对象属性可以自动反馈到dom上,很神奇,后面也看到了文档里面实现是对对象定义了getter和setter并覆盖原属性,索性就来总结这两者的用法,下面话不多说了,来一起看看详细的介绍吧. 原理 利用Object.defineProperty来重写对象属性为getter和setter,通过getter和setter顺便改变绑定DOM节点的

  • JavaScript之Getters和Setters 平台支持等详细介绍

    来自John Resig早年的文章,大致翻译了一下,以作备忘. 令人高兴的是,我想我终于可以说,"现在,JavaScript的Getters和Setters使用非常广泛,它和每个JavaScript开发者的切身利益息息相关".靠,我为了说这句话已经等了很久了. 首先,我们先来快速了解什么是Getters和Setters,以及它们为什么很有用.然后,我们来看看现在都有哪些平台支持Gettets和Setters. Getters和Setters Getters和Setters使你可以快速获

  • 谈谈因Vue.js引发关于getter和setter的思考

    谈谈因Vue.js引发关于getter和setter的思考

    起因 当我打印出Vue实例下的data对象里的属性时,发现了一个有趣的事情: 它的每个属性都有两个相对应的get和set方法,我觉的这是多此一举的,于是去网上查了查Vue双向绑定的实现原理,才发现它和Angular.js双向绑定的实现原理完全不同,Angular是用的数据脏检测,当Model发生变化,会检测所有视图是否绑定了相关数据,再更改视图.而Vue使用的发布订阅模式,是点对点的绑定数据. Vue的数据绑定只有两个步骤,compile=>link. 我一直在想,vue是通过什么去监听用户对M

  • JavaScript中setter和getter方法介绍

    javascript中的setter.getter是平时接触比较少的方法,其本身也并不是标准方法,只在非ie浏览器里支持(ie内核也许有其他方法可以做到呢?暂时不知其解),但是加以利用可以做许多事情,比如: 1.对数据的访问限制: a.value是对value变量的getter方法调用,如果在getter方法实现中抛出异常,可以阻止对value变量的访问 2.对dom变量进行监听: window.name是一个跨域非常好用的dom属性(大名鼎鼎,详见百度),如果覆盖window.name的set

  • JavaScript的setter与getter方法

    以前在写项目过程一直都没有使用过Javascript的setter与getter方法,所以对其是一种要懂不懂的概念:今天看书看到这个知识点,还是模模糊糊的,于是就打算研究研究: Javascript对象的属性是由名字,值和一组特性构成的.那么首先,来了解一下对象的两种属性: 数据属性,我们经常使用,应该很熟悉 访问器属性,也称存取器属性 何为存取器属性?就是一组获取和设置值的函数.在ECMAScript5中,属性值可以用一个或两个方法设置,这两个方法就是getter和setter:因此gette

  • JavaScript中Math对象的方法介绍

    1.比较最值方法 比较最值有两种方法,max() 和 min() 方法. 1.1 max() 方法,比较一组数值中的最大值,返回最大值. var maxnum = Math.max(12,6,43,58,70); alert(maxnum); //"70" 1.2 min() 方法,比较一组数值中的最小值,返回最小值. var minnum = Math.min(12,6,43,58,70); alert(minnum); //"6" 2.数值舍入方法 2.1 ce

  • JavaScript中String对象的方法介绍

    1.字符方法 1.1 charAt() 方法,返回字符串中指定位置的字符. var question = "Do you like JavaScript?"; alert(question.charAt(5)); //"u" 字符串 "Do you like JavaScript?" 的长度为23,即位置从0到22.指定位置5处的字符是"u". 1.2 charCodeAt() 方法,返回字符串中指定位置的字符编码. var

  • JavaScript中的prototype.bind()方法介绍

    以前,你可能会直接设置self=this或者that=this等等,这样做当然也能起作用,但是使用Function.prototype.bind()会更好,看上去也更专业.下面举个简单的例子: 复制代码 代码如下: var myObj = {    specialFunction: function () {    },    anotherSpecialFunction: function () {    },    getAsyncData: function (cb) {        c

  • 关于iOS中属性变量setter与getter方法的理解

    关于成员变量.实例变量.属性变量 成员变量 @implementation ViewController { UILabel *textLabel; int count; } 成员变量是用于类的内部,无需与外界接触的变量.成员变量默认是protected,因为成员变量不会生成set.get方法,所以无法和外界接触,从上面代码可以看出来,成员变量是定义在{ }中的变量,如果变量的数据类型是一个类,就如:UILabel *textLabel;那么称这个变量为实例变量.所以实例变量也是成员变量的一种特

  • JavaScript中递归实现的方法及其区别

    递归函数:递归函数是在通过名字调用自身的情况下构成的. 递归实现阶乘函数: 方法一:通过使用函数的名字 function factorial(num){ if(num<=1){ return 1; }else{ return num*factorial(num-1); } } console.log(factorial(4)); 结果为:24: 但是这种方法实现递归有一个问题,观察以下代码: function factorial(num){ if(num<=1){ return 1; }els

  • JavaScript中ES6字符串扩展方法

    es6这个String对象倒是扩展了不少方法,但是很多都是跟字符编码相关,个人选了几个感觉比较常用的方法: includes 搜索字符的神器 还记得我们之前如何判断某个字符串对象是否包含特地字符的吗? var str='google'; if(str.indexOf('o')>-1){ console.log('yes'); }else{ console.log('no'); } indexOf本来只是一个获取字符对应位置的方法,因为找到不到会返回-1这个值,就成了判断是否包含的方法,inclu

  • JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)

    js中输出信息的方法内容如下所示: 1.文档流输出 document.write('hello'); 2.输出信息提示框 模态对话框 window.alert('要输出显示的内容'); 或 alert('要输出显示的内容'); alert(n); 3.信息确认框 var f = window.confirm('是否要进入新浪网'); confirm(""); if(f){ location.href = 'http://www.sina.com.cn'; } 4.提示输入框 windo

  • javascript的几种继承方法介绍

    1.原型链继承:构造函数.原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针.确认原型和实例之间的关系用instanceof. 原型链继承缺点:字面量重写原型会中断关系,使用引用类型的原型,并且子类型还无法给超类型传递参数 function Parent(){ this.name='mike'; } function Child(){ this.age=12; } //儿子继承父亲(原型链) Child.prototype

随机推荐