JavaScript之Getters和Setters 平台支持等详细介绍
JavaScript之Getters和Setters 平台支持等详细介绍
发布时间:2016-12-30 来源:查字典编辑
摘要:来自JohnResig早年的文章,大致翻译了一下,以作备忘。令人高兴的是,我想我终于可以说,“现在,JavaScript的Getters和S...

来自John Resig早年的文章,大致翻译了一下,以作备忘。

令人高兴的是,我想我终于可以说,“现在,JavaScript的Getters和Setters使用非常广泛,它和每个JavaScript开发者的切身利益息息相关”。靠,我为了说这句话已经等了很久了。

首先,我们先来快速了解什么是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;

});

};

}

作为福利,我写了一个方法,它可以帮你实现对象的继承,并且还考虑到了getters和setters

复制代码 代码如下:

// Helper method for extending one object with another

function extend(a,b) {

for ( var i in b ) {

var g = b.__lookupGetter__(i), s = b.__lookupSetter__(i);

if ( g || s ) {

if ( g )

a.__defineGetter__(i, g);

if ( s )

a.__defineSetter__(i, s);

} else

a[i] = b[i];

}

return a;

}

在我的extend()方法中,你会发现两个新方法:__lookupGetter__和__lookupSetter__。一旦你真正开始使用getters和setters,这将很有用。

比如,当我第一次写extend()方法时,我遇到了各种errors,我彻底晕了。后来我发现问题就出在一个简单的语句上:a[i] = b[i];

如果对象a存在一个setter,名字叫做i,对象b存在一个getter,名字也叫做i,a[i]不是通过别的setter方法赋值的,而是来自b的getter方法。这两个__lookup*__方法使你可以获取原始的函数。(这段翻得有点晦涩,原文如下)

If a setter existed in object a, named i, and a getter existed in object b, named i, a[i]'s value was being set not to the other setter function, but to the computed value from b's getter function. The two __lookup*__ methods allow you to access the original functions used for the methods (thus allowing you to write an effective extend method, for example).

记住以下几点:

一个对象内,每个变量只能有一个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

(原文没写Chrome,还没出呢)

我用下面的代码测试浏览器:

复制代码 代码如下:

javascript:foo={get test(){ return "foo"; }};alert(foo.test);

另外,以下两种引擎也支持Getters和Setters:

SpiderMonkey

Rhino 1.6R6 (New)

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类