JavaScript物件中屬性的getter和setter方法
阿新 • • 發佈:2019-02-14
JavaScript物件的屬性是由名字、值和一組特性(可寫、可列舉、可配置等)構成的。在ECMAScript 5中,屬性值可以用一個或兩個方法代替,這兩個方法就是getter和setter。
var myObj = {
a: 2,
get b(){
return 3;
}
};
console.log(myObj.a);//2
console.log(myObj.b);//3
上面的程式碼中,屬性a稱為“資料屬性”,它只有一個簡單的值;像屬性b這種用getter和setter方法定義的屬性稱為“存取器屬性”。
存取器屬性定義為一個或兩個與屬性同名的函式
當程式查詢存取器的屬性值時,JavaScript代用getter方法(無引數),這個方法的返回值就是該屬性存取表示式的值。當程式設定一個存取器屬性值時,JavaScript呼叫setter方法,將賦值表示式右側的值當作引數傳入setter。從某種意義上來說,這個方法負責設定屬性值,可以忽略該方法的返回值。
當一個屬性被定義為存取器屬性時,JavaScript會忽略它的value和writable特性,取而代之的是set和get(還有configurable和enumerable)特性。
var myObj = {
get a(){
return 2;
}
};
myObj.a = 3;
console.log(myObj.a);//2
如上面程式碼所示,由於我們只定義了屬性a的getter,所以對a進行設定(即賦值)時set會忽略賦值操作,不會丟擲錯誤。
var myObj = {
get a(){
return this._a_;
},
set a(val){
this._a_ = val;
}
};
myObj.a = 3;
console.log(myObj.a);//3
正確的寫法如上所示。getter和setter方法中的this都指向myObj物件。這裡我們把賦值操作中的3儲存到另一箇中間變數 _a_
中。名稱 _a_
只是一種慣例,並沒有其它任何特殊行為,它只是一個普通的屬性。把它換成其它任意合法名稱如 _b_
都行,甚至可以在外面將它打印出來。
var myObj = {
get a(){
return this._b_;
},
set a(val){
this._b_ = val;
}
};
myObj.a = 3;
console.log(myObj.a);//3
console.log(myObj._b_);//3
另外,存取器屬性也是可以繼承的:
var myObj = {
get a(){
return this._b_;
},
set a(val){
this._b_ = val;
}
};
myObj.a = 3;
var anotherObj = Object.create(myObj);
console.log(anotherObj.a);//3