JavaScript get set 訪問器屬性

admin發表於2018-10-30
JavaScript

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。

相關文章