JavaScript get set 訪問器屬性

admin發表於2018-10-30

JavaScript中大致有兩類屬性:

(1).資料屬性。

(2).訪問器屬性。

configurable、enumerable和writable一文已經對資料屬性的特性做了詳細介紹。

本文將通過程式碼例項對訪get set問器屬性做一下詳細介紹。

因為訪問器屬性是ES5新增,所以可能不少朋友對它比較陌生。

訪問器屬性功能更為強大,舉一個例子,比如本站成立於2016年,那麼本站的年齡到2018年是兩歲。

那麼我們想有一個通用的功能,確定了網站成立於哪一年,自動計算出網站的年齡。

使用get與set訪問器可以很輕鬆實現此功能。

程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let web = {
  _age:0,
  set startYear (startYear){
    if(startYear <= new Date().getFullYear()){
      this._age=new Date().getFullYear()-startYear;
    } 
  },
  get age (){
    return this._age;
  }
};
web.startYear=2015;
console.log(web.age);

程式碼執行效果截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/30/150341f1bgqqmi47yxuyml.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面程式碼在物件直接量中定義了兩個訪問器屬性startYear和age。

_age前面加上一個下劃線標識此屬性是一個私有屬性,不是對外公開的的一個介面,是以慣例。

當我們給startYear屬性賦值年份之後,可以自動計算出網站的年齡。

一.訪問器屬性定義:

訪問器屬性由get和set方法定義。

(1).讀取屬性的時候呼叫get方法。

(2).設定屬性的時候呼叫set方法。

程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
let web={
    _webName:"螞蟻部落",
    get webName(){
        return this._webName;
    },
    set webName(webName){
        this._webName=webName;
    }
}

訪問器屬性的兩個方法都是可選的,省略get,那麼無法讀取該屬性,省略set,那麼此屬性只讀。

上面是在字面量中定義訪問器屬性,當然也可以利用Object.defineProperty方法定義。

程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
let web={
  _webName:"螞蟻部落"
}

Object.defineProperty(web, 'webName', {
  get: function() {
    return this._webName;
  },
  set: function(webName) {
    this._webName=webName;
  }
});

關於Object.defineProperty方法可以參閱Object.defineProperty()一章節。

二.訪問器屬性特性:

訪問器屬性具有如下四個特性:

(1).[[Configurable]]:描述屬性是否可以被刪除,特性是否可以被改變,或是否可以被修改為訪問器屬性。

(2).[[Enumerable]]:描述屬性是否可以被遍歷。

(3).[[Get]]:在讀取屬性時,呼叫此方法。

(4).[[Set]]:設定屬性值時,呼叫此方法。

前兩個特性本文不再介紹,可以參閱configurable、enumerable和writable一文。

與資料屬性相比,訪問器屬性沒有[[Writable]]和[[Value]]特性。

因為這兩個特性的功能被[[Get]]和[[Set]]取代,它們不能同時存在,否則報錯。

[JavaScript] 純文字檢視 複製程式碼
let web={
  _webName:"螞蟻部落"
}
Object.defineProperty(web, 'webName', {
  get: function() {
    return this._webName;
  }
});

只有get方法,那麼webName屬性就是隻讀的,類似於資料屬性的[[Writable]]特性值為false。

相關文章