首頁 > web前端 > js教程 > JavaScript的setter與getter方法

JavaScript的setter與getter方法

小云云
發布: 2017-12-07 15:46:37
原創
1430 人瀏覽過

以前在寫專案過程一直都沒有使用過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
登入後複製


另外,存取器屬性也是可以被繼承的。

相關推薦:

Javascript中getter和setter基本上介紹

#JavaScript中getter/setter實作的範例程式碼分享

實作了一個PHP5的getter/setter基底類別的程式碼_php技巧

#

以上是JavaScript的setter與getter方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板