解鎖JS對象的隱藏技能：getter讓屬性“活”起來詳情 - javascript,靜態屬性,數據,JavaScript,前端開發 wx66ece9f42611c 博客

在前端開發中，我們經常會遇到這樣的場景：需要動態計算對象屬性、延遲加載複雜數據，或者確保屬性值始終保持最新。如果用傳統的靜態屬性定義，往往需要寫大量重複代碼手動更新，既繁瑣又容易出錯。其實JavaScript早已內置了一個強大的解決方案——getter訪問器屬性，它能讓對象屬性具備“動態響應”能力，讓代碼更簡潔、更優雅。

一個真實的痛點：靜態屬性的“滯後性”

先看一個常見的開發場景：在電商項目中，我們需要維護購物車數據，其中“總價”需要根據商品列表動態計算。如果用靜態屬性定義：

// 傳統寫法：靜態屬性+手動更新
export const cart = {
  items: [199, 299, 399],
  total: 199 + 299 + 399 // 初始化時計算一次
};

// 後續添加商品時，總價不會自動更新
cart.items.push(499);
console.log(cart.total); // 897（依然是舊值，不符合預期）

為了解決這個問題，傳統做法是封裝一個計算函數：

export const cart = {
  items: [199, 299, 399],
  getTotal() {
    return this.items.reduce((sum, price) => sum + price, 0);
  }
};

// 每次需要總價時都要調用函數
console.log(cart.getTotal()); // 897
cart.items.push(499);
console.log(cart.getTotal()); // 1396（需要手動調用才能獲取最新值）

這種方式雖然能得到正確結果，但存在明顯弊端：一是訪問方式不統一（屬性用.訪問，函數需要加()），二是容易忘記調用函數導致使用舊值，三是代碼不夠直觀。

這時候，getter就能完美解決這個問題。

優雅解決方案：getter訪問器屬性

用getter改寫上面的購物車示例，只需簡單調整屬性定義方式：

export const cart = {
  items: [199, 299, 399],
  // 用get關鍵字定義訪問器屬性
  get total() {
    console.log("正在計算總價...");
    return this.items.reduce((sum, price) => sum + price, 0);
  }
};

// 像訪問普通屬性一樣使用，無需調用函數
console.log(cart.total); // 正在計算總價... 897
cart.items.push(499);
console.log(cart.total); // 正在計算總價... 1396（自動獲取最新值）

可以看到，getter讓屬性訪問保持了簡潔的語法，同時實現了動態計算。每次訪問cart.total時，都會重新執行get函數，確保得到的始終是最新結果。

深入理解getter的工作原理

在JavaScript中，對象的屬性分為兩種：數據屬性（普通靜態屬性）和訪問器屬性（由get/set定義）。getter本質上是一個綁定在屬性上的函數，當訪問該屬性時，函數會自動執行並返回結果。

等價於Object.defineProperty

getter的語法糖其實是Object.defineProperty的簡化寫法，兩者完全等價：

// 語法糖寫法
const user = {
  firstName: "張",
  lastName: "三",
  get fullName() {
    return `${this.firstName}${this.lastName}`;
  }
};

// 原生等價寫法
const user = {
  firstName: "張",
  lastName: "三"
};
Object.defineProperty(user, "fullName", {
  get: function() {
    return `${this.firstName}${this.lastName}`;
  },
  enumerable: true // 確保屬性可枚舉
});

通過Object.defineProperty可以更清晰地看到，fullName並不是一個固定值，而是一個需要執行的函數。這也是getter能實現動態計算的核心原因。

與Vue computed的“血緣關係”

用過Vue的開發者對computed計算屬性一定不陌生，它的核心思想正是getter的響應式延伸：

import { computed, ref } from "vue";

const width = ref(100);
const height = ref(50);

// computed本質是響應式的getter
const area = computed(() => width.value * height.value);

區別在於，Vue的computed額外添加了依賴追蹤和緩存機制：當依賴的ref值變化時，會自動重新計算；而原生getter每次訪問都會執行函數，沒有緩存。如果需要原生getter支持緩存，可以手動實現：

const user = {
  firstName: "李",
  lastName: "四",
  _fullName: "", // 緩存變量
  get fullName() {
    if (!this._fullName) {
      console.log("首次計算，緩存結果");
      this._fullName = `${this.firstName}${this.lastName}`;
    }
    return this._fullName;
  }
};

使用getter的關鍵注意事項

1. 不能與同名數據屬性共存

如果一個屬性同時定義了getter和靜態值，會直接報錯：

const obj = {
  get name() { return "張三"; },
  name: "李四" // 報錯：Duplicate data property in object literal not allowed
};

2. 只讀屬性需配合setter

getter默認是隻讀的，直接賦值會報錯。如果需要支持修改，必須搭配setter：

const person = {
  _age: 18, // 下劃線表示私有屬性（約定）
  get age() {
    return this._age;
  },
  set age(val) {
    // 可以添加數據校驗邏輯
    if (val < 0 || val > 120) {
      throw new Error("年齡必須在0-120之間");
    }
    this._age = val;
  }
};

person.age = 25;
console.log(person.age); // 25
person.age = 150; // 報錯：年齡必須在0-120之間

3. 避免遞歸調用

getter內部不能訪問自身屬性，否則會導致無限遞歸：

const obj = {
  get count() {
    return this.count + 1; // 報錯：Maximum call stack size exceeded
  }
};

4. this指向問題

在getter中使用this時，指向當前對象。如果通過解構賦值獲取屬性，this會丟失：

const user = {
  name: "王五",
  get upperName() {
    return this.name.toUpperCase();
  }
};

const { upperName } = user;
console.log(upperName); // 報錯：Cannot read properties of undefined

解決方法是保留對象上下文，直接通過對象訪問屬性。

getter的更多實用場景

1. 延遲計算（性能優化）

對於計算成本高的數據（如複雜篩選、大數據處理），可以用getter實現懶加載，只有在真正需要時才計算：

const dataList = {
  rawData: [/* 10萬條數據 */],
  get filteredData() {
    console.log("開始篩選數據...");
    return this.rawData.filter(item => item.status === "active");
  }
};

// 首次訪問時才執行篩選
console.log(dataList.filteredData.length);

2. 數據格式化

自動格式化數據，確保每次訪問都符合預期格式：

const order = {
  createTime: 1690848000000, // 時間戳
  get formatTime() {
    return new Date(this.createTime).toLocaleString("zh-CN");
  }
};

console.log(order.formatTime); // 2023/8/1 00:00:00

3. 依賴外部狀態的動態屬性

結合全局狀態（如主題、語言），實現屬性的動態切換：

// 全局主題配置
const theme = {
  mode: "light",
  colors: {
    light: "#ffffff",
    dark: "#121212"
  }
};

const uiConfig = {
  get bgColor() {
    return theme.colors[theme.mode];
  }
};

console.log(uiConfig.bgColor); // #ffffff
theme.mode = "dark";
console.log(uiConfig.bgColor); // #121212

項目中的最佳實踐

優先使用getter簡化API：當屬性需要動態計算時，用getter替代getXxx()函數，讓API更簡潔（如user.fullName比user.getFullName()更直觀）。

配合私有字段增強封裝：用ES6私有字段（#開頭）替代下劃線約定，避免外部直接修改內部狀態：

const person = {
  #age: 18, // 真正的私有屬性
  get age() { return this.#age; },
  set age(val) { this.#age = val; }
};

複雜場景結合Proxy：如果需要對多個屬性統一處理，可以用Proxy代理對象，批量實現getter邏輯：

const proxy = new Proxy({ a: 1, b: 2 }, {
  get(target, key) {
    return target[key] * 2; // 所有屬性訪問時自動翻倍
  }
});
console.log(proxy.a); // 2

wx66ece9f42611c 博客

wx66ece9f42611c 博客

博客 / 詳情