Accessor詳解

一、Accessor介紹

Accessor即存取器，是一種用於訪問和設置對象屬性的方式。它允許開發者在獲取對象屬性值或設置對象屬性值時，執行特定的操作，比如進行數據校驗、數據過濾、計算等操作。

在ES5之前，只能通過getter和setter函數實現類似的功能。而ES5引入了Accessor，讓開發者能夠更方便地實現這些功能。Accessor可以理解為getter/setter函數的語法糖。

二、Accessor的語法

//定義一個對象
let obj = {
  _name: "Alice",
  get name() {
    return this._name.toUpperCase();
  },
  set name(value) {
    if (value.length < 4) {
      console.log("Name is too short!");
      return;
    }
    this._name = value;
  }
};

//獲取屬性值
console.log(obj.name); //"ALICE"

//設置屬性值
obj.name = "Bob"; //輸出 "Name is too short!"
obj.name = "Charlie";
console.log(obj.name); //"CHARLIE"

上面的代碼中，obj對象有一個_name屬性，通過get和set方法實現。在獲取name屬性值時，會返回_name的大寫形式；在設置name屬性值時，如果字符串長度小於4，會輸出錯誤信息。如果長度符合要求，則會將字符串賦值給_name屬性。

三、Accessor vs. Getter/Setter函數

在ES5之前，只能通過getter和setter函數實現訪問和設置對象屬性的操作。讓我們來比較一下Accessor和Getter/Setter函數的異同。

1.語法不同

Accessor的語法更加簡單，與普通對象屬性一樣。Getter/Setter函數需要通過Object.defineProperty()方法定義屬性描述符。

2.訪問屬性值的方式不同

Accessor通過對象.屬性名的方式訪問屬性值；而Getter/Setter函數是通過對象調用函數的方式訪問屬性值。

//Getter/Setter函數的使用
let obj = {
  _name: "Alice",
  get name() {
    return this._name.toUpperCase();
  },
  set name(value) {
    if (value.length < 4) {
      console.log("Name is too short!");
      return;
    }
    this._name = value;
  }
};

console.log(obj.getName()); //"ALICE"
obj.setName("Bob"); //輸出 "Name is too short!"
obj.setName("Charlie");
console.log(obj.getName()); //"CHARLIE"

//Accessor的使用
let obj = {
  _name: "Alice",
  get name() {
    return this._name.toUpperCase();
  },
  set name(value) {
    if (value.length < 4) {
      console.log("Name is too short!");
      return;
    }
    this._name = value;
  }
};

console.log(obj.name); //"ALICE"
obj.name = "Bob"; //輸出 "Name is too short!"
obj.name = "Charlie";
console.log(obj.name); //"CHARLIE"

3.操作多個屬性時不同

Accessor可以同時操作多個屬性，而Getter/Setter函數只能操作一個屬性。

//Accessor操作多個屬性
let obj = {
  _firstName: "Alice",
  _lastName: "Green",
  get fullName() {
    return this._firstName + " " + this._lastName;
  },
  set fullName(value) {
    let parts = value.split(" ");
    this._firstName = parts[0];
    this._lastName = parts[1];
  }
};

obj.fullName = "Bob Dylan";
console.log(obj.fullName); //"Bob Dylan"

//Getter/Setter函數只能操作一個屬性
let obj = {};
Object.defineProperty(obj, "name", {
  get: function() {
    return this._name.toUpperCase();
  },
  set: function(value) {
    if (value.length < 4) {
      console.log("Name is too short!");
      return;
    }
    this._name = value;
  }
});

obj.name = "Bob"; //輸出 "Name is too short!"
obj.name = "Charlie";
console.log(obj.name); //"CHARLIE"

四、Accessor的應用場景

1.數據校驗

Accessor允許開發者在設置屬性值前，對屬性值進行校驗。比如，可以針對字符串長度、數值範圍、對象類型等進行校驗。

let obj = {
  _age: 0,
  get age() {
    return this._age;
  },
  set age(value) {
    if (value  100) {
      console.log("Age should be between 0 and 100!");
      return;
    }
    this._age = value;
  }
};

obj.age = -1; //輸出 "Age should be between 0 and 100!"
obj.age = 101; //輸出 "Age should be between 0 and 100!"

2.計算屬性

Accessor允許開發者在獲取和設置屬性值時，執行特定操作，比如進行數據計算、數據過濾、數據轉換等操作。

let obj = {
  _price: 0,
  _quantity: 0,
  get total() {
    return this._price * this._quantity;
  },
  set price(value) {
    this._price = value;
  },
  set quantity(value) {
    this._quantity = value;
  }
};

obj.price = 10;
obj.quantity = 5;
console.log(obj.total); //50

3.數據過濾

Accessor允許開發者在獲取和設置屬性值時，對屬性值進行過濾。比如，可以對字符串進行去除空格、轉換為小寫等操作。

let obj = {
  _name: "",
  get name() {
    return this._name.trim().toLowerCase();
  },
  set name(value) {
    this._name = value;
  }
};

obj.name = "  ALICE ";
console.log(obj.name); //"alice"

五、Accessor的注意事項

雖然Accessor很方便，但是開發者需要注意以下幾點：

1.命名規範

開發者需要遵循屬性命名規範，避免與其他屬性或方法產生衝突。

2.效率問題

Accessor雖然方便，但是運行效率較低。在需要高效運行的場景下，建議使用普通的對象屬性和方法。

3.內存泄漏問題

Accessor可能會引起內存泄漏問題。建議在不需要使用Accessor時，刪除相應的屬性或方法。

4.兼容性問題

Accessor在ES5之前的瀏覽器中沒有實現。如果需要兼容老版本的瀏覽器，建議使用Getter/Setter函數。

六、總結

通過本文的介紹，我們了解了Accessor的語法、與Getter/Setter函數的區別、應用場景以及注意事項。Accessor可以讓開發者更加方便地訪問和設置對象屬性，具有較好的可讀性和可維護性。但是需要合理應用，在性能和兼容性上需要注意。