属性getter和setter
我们知道,对象属性是由名字、值和一组特性构成的。在ECMAScript5 中,属性值可以用一个或两个方法替代,这两个方法就是getter和setter。由getter和setter定义的属性称做“存取器属性”,它不同于“数据属性”,数据属性只有一个简单的值。
当程序查询存取器属性的值时,JavaScript调用getter方法(无参数)。这个方法的返回值就是属性存取表达式的值。当程序设置一个存取器属性的值时,JavaScript调用setter方法,将赋值表达式右侧的值当做参数传入setter。从某种意义上讲,这个方法负责“设置”属性值。可以忽略setter方法的返回值。
和数据属性不同,存取器属性不具有可写性。如果属性同时具有getter和setter方法,那么它是一个读/写属性。如果它只有getter方法,那么它是一个只读属性。如果它只有setter方法,那么它是一个只写属性(数据属性中有一些例外),读取只写属性总是返回undefined。
定义存取器属性最简单的方法是使用对象直接量语法的一种扩展写法:
var o={//普通的数据属性
data_prop:value,//存取器属性都是成对定义的函数
get accessor_prop(){/*这里是函数体*/},
set accessor_prop(value){/*这里是函数体*/}
};
存取器属性定义为一个或两个和属性同名的函数,这个函数定义没有使用function关键字,而是使用get和(或)set。注意,这里没有使用冒号将属性名和函数体分隔开,但在函数体的结束和下一个方法或数据属性之间有逗号分隔。
例如,思考下面这个表示点坐标的对象。它有两个普通的属性x和y分别表示对应点的X坐标和Y坐标,它还有两个等价的存取器属性用来表示点的极坐标:
var p={//x和y是普通的可读写的数据属性
x:1.0,
y:1.0,//r是可读写的存取器属性,它有getter和setter.
//函数体结束后不要忘记带上逗号
get r(){
return Math.sqrt(this.x*this.x+this.y*this.y);
},
set r(newvalue){
var oldvalue=Math.sqrt(
this.x*this.x+this.y*this.y
);
var ratio=newvalue/oldvalue;
this.x*=ratio;
this.y*=ratio;
},//theta是只读存取器属性,它只有getter方法
get theta(){
return Math.atan2(this.y,this.x);
}
};
注意在这段代码中getter和setter里this关键字的用法。JavaScript把这些函数当做对象的方法来调用,也就是说,在函数体内的this指向表示这个点的对象,因此,r属性的getter方法可以通过this.x和this.y引用x和y属性。
和数据属性一样,存取器属性是可以继承的,因此可以将上述代码中的对象p当做另一个“点”的原型。
好了,今天的文章就到这里,本文由Web前端精髓为您提供,喜欢的同学记得点击收藏或者点赞哦!