作者: 以前在寫項目過程一直都沒有使用過Javascript的setter與getter方法,所以對其是一種要懂不懂的概念;今天看書看到這個知識點,還是模模糊糊的,於是就打算研究研究; Javascript對象的屬性是由名字,值和一組特性構成的。那麼首先,來瞭解一下對象的兩種屬性: + 數據屬性,我 ...
以前在寫項目過程一直都沒有使用過Javascript的setter與getter方法,所以對其是一種要懂不懂的概念;今天看書看到這個知識點,還是模模糊糊的,於是就打算研究研究;
Javascript對象的屬性是由名字,值和一組特性構成的。那麼首先,來瞭解一下對象的兩種屬性:
- 數據屬性,我們經常使用,應該很熟悉
- 訪問器屬性,也稱存取器屬性
何為存取器屬性?就是一組獲取和設置值的函數。在ECMAScript5中,屬性值可以用一個或兩個方法設置,這兩個方法就是getter和setter;因此getter和setter定義的屬性被稱為存取器屬性。
var o = {
get val(){
/*函數體*/
return ;
},
set val(n){
/*函數體*/
}
}
上面的就是一個存取器屬性定義的最簡單的方法,可以看出getter和setter方法其實就是取代function的一個函數。
var o = {
a:3,
get val(){
return Math.pow(this.a,2);
}
}
console.log(o.val);//9
o.val = 100;
console.log(o.val);//9
getter方法是無參數,並且有返回值的;當單獨設置getter方法時,只能獲取屬性值,無法更改其定義的屬性值的,保證了數據的安全性;
var o = {
a:3,
set val(n){
this.a = n;
}
}
console.log(o.val);//undefined
setter方法是有參數,沒有返回值的;當單獨設置setter方式時,是無法讀取屬性值的;
var o ={
a:3,
get val(){
return Math.pow(this.a,n);
},
set val(n){
this.a = Math.max(this.a,n);
}
}
console.log(o.a);//3
console.log(o.val);//9
o.val = 10;
console.log(o.a);//10
console.log(o.val);//100
通過上面的代碼可以看出,其中this是指其對象(即代碼中的“o”);
var o ={
a:3,
get val(){
return Math.pow(this.a,n);
},
set val(n){
this.a = Math.max(this.a,n);
}
}
o.val = 10;
var foo = Object.create(o);
console.log(foo.val);//10
foo.val = 9;
console.log(foo.val);//10
另外,存取器屬性也是可以被繼承的;