JavaScript取值函數getter與存值函數setter怎么使用

JavaScript取值函數getter與存值函數setter怎么使用

在JavaScript中，對象屬性的訪問和修改通常是通過直接賦值或讀取來實現的。然而，有時我們需要在訪問或修改屬性時執行一些額外的邏輯，這時就可以使用getter和setter函數。getter和setter允許我們在讀取或設置屬性值時執行自定義的操作，從而實現更靈活和強大的對象行為。

本文將詳細介紹getter和setter的使用方法，并通過示例代碼幫助你理解它們的應用場景。

1. 什么是getter和setter？

getter和setter是JavaScript對象中的特殊方法，用于定義屬性的讀取和寫入行為。它們允許你在訪問或修改屬性時執行自定義的邏輯。

• getter：用于定義屬性的讀取行為。當你訪問一個屬性時，getter函數會被調用，并返回該屬性的值。
• setter：用于定義屬性的寫入行為。當你給一個屬性賦值時，setter函數會被調用，并允許你在賦值時執行一些額外的操作。

getter和setter通常與對象的屬性一起使用，但它們并不是屬性本身，而是屬性的訪問器。

2. 如何定義getter和setter？

在JavaScript中，getter和setter可以通過兩種方式定義：

2.1 使用對象字面量定義

在對象字面量中，你可以使用get和set關鍵字來定義getter和setter。

const obj = {
  _value: 0, // 內部屬性，通常以下劃線開頭表示私有

  get value() {
    console.log('Getting value');
    return this._value;
  },

  set value(newValue) {
    console.log('Setting value');
    if (newValue >= 0) {
      this._value = newValue;
    } else {
      console.log('Value must be non-negative');
    }
  }
};

console.log(obj.value); // 輸出: Getting value, 0
obj.value = 10;        // 輸出: Setting value
console.log(obj.value); // 輸出: Getting value, 10
obj.value = -5;        // 輸出: Setting value, Value must be non-negative

在這個例子中，value屬性的讀取和寫入分別由getter和setter控制。getter在讀取屬性時輸出一條日志，并返回內部屬性_value的值。setter在設置屬性時檢查新值是否為非負數，如果是則更新_value，否則輸出一條錯誤信息。

2.2 使用Object.defineProperty定義

除了在對象字面量中定義getter和setter，你還可以使用Object.defineProperty方法來定義它們。

const obj = {
  _value: 0
};

Object.defineProperty(obj, 'value', {
  get() {
    console.log('Getting value');
    return this._value;
  },
  set(newValue) {
    console.log('Setting value');
    if (newValue >= 0) {
      this._value = newValue;
    } else {
      console.log('Value must be non-negative');
    }
  }
});

console.log(obj.value); // 輸出: Getting value, 0
obj.value = 10;        // 輸出: Setting value
console.log(obj.value); // 輸出: Getting value, 10
obj.value = -5;        // 輸出: Setting value, Value must be non-negative

在這個例子中，我們使用Object.defineProperty方法為obj對象定義了一個名為value的屬性，并為其指定了getter和setter。這種方式與對象字面量中的定義方式效果相同，但提供了更多的靈活性，例如可以定義屬性的可枚舉性、可配置性等。

3. getter和setter的應用場景

getter和setter在JavaScript中有許多應用場景，以下是一些常見的例子：

3.1 數據驗證

setter可以用于在設置屬性值時進行數據驗證。例如，你可以確保某個屬性只能接受特定范圍內的值。

const person = {
  _age: 0,

  get age() {
    return this._age;
  },

  set age(newAge) {
    if (newAge >= 0 && newAge <= 120) {
      this._age = newAge;
    } else {
      console.log('Invalid age');
    }
  }
};

person.age = 25;  // 有效
console.log(person.age); // 輸出: 25
person.age = 150; // 輸出: Invalid age

在這個例子中，age屬性的setter確保年齡值在0到120之間，否則輸出一條錯誤信息。

3.2 計算屬性

getter可以用于定義計算屬性，即屬性的值是根據其他屬性計算得出的。

const rectangle = {
  width: 10,
  height: 5,

  get area() {
    return this.width * this.height;
  }
};

console.log(rectangle.area); // 輸出: 50

在這個例子中，area屬性并沒有直接存儲值，而是通過getter計算得出。

3.3 數據格式化

getter和setter可以用于在讀取或設置屬性時對數據進行格式化。

const user = {
  _name: '',

  get name() {
    return this._name.toUpperCase();
  },

  set name(newName) {
    this._name = newName.trim();
  }
};

user.name = '  John Doe  ';
console.log(user.name); // 輸出: JOHN DOE

在這個例子中，name屬性的getter將名字轉換為大寫，setter在設置名字時去除首尾空格。

3.4 私有屬性

getter和setter可以用于實現私有屬性。雖然JavaScript本身沒有真正的私有屬性，但通過使用下劃線前綴和getter/setter，可以模擬私有屬性的行為。

const account = {
  _balance: 1000,

  get balance() {
    return this._balance;
  },

  set balance(newBalance) {
    if (newBalance >= 0) {
      this._balance = newBalance;
    } else {
      console.log('Balance cannot be negative');
    }
  }
};

console.log(account.balance); // 輸出: 1000
account.balance = 1500;       // 有效
console.log(account.balance); // 輸出: 1500
account.balance = -500;       // 輸出: Balance cannot be negative

在這個例子中，_balance屬性被視為私有屬性，只能通過balance的getter和setter進行訪問和修改。

4. 注意事項

在使用getter和setter時，有一些注意事項需要牢記：

• 避免無限遞歸：在getter和setter中訪問或修改屬性時，要小心避免無限遞歸。例如，在setter中直接設置屬性值會導致setter被再次調用，從而引發無限遞歸。

  const obj = {
    _value: 0,

    get value() {
      return this._value;
    },

    set value(newValue) {
      this.value = newValue; // 錯誤：無限遞歸
    }
  };

正確的做法是使用內部屬性來存儲值：

  const obj = {
    _value: 0,

    get value() {
      return this._value;
    },

    set value(newValue) {
      this._value = newValue; // 正確
    }
  };

• 性能考慮：getter和setter會在每次訪問或修改屬性時被調用，因此如果邏輯復雜或頻繁調用，可能會影響性能。在設計時要考慮這一點。

• 兼容性：getter和setter在ES5中引入，因此在較舊的瀏覽器中可能不被支持。如果你需要兼容舊版瀏覽器，可能需要使用其他方法來實現類似的功能。

5. 總結

getter和setter是JavaScript中非常強大的工具，允許你在訪問或修改對象屬性時執行自定義的邏輯。它們可以用于數據驗證、計算屬性、數據格式化等多種場景。通過合理使用getter和setter，你可以編寫出更加靈活和健壯的代碼。

希望本文能幫助你理解getter和setter的使用方法，并在實際開發中靈活運用它們。