JavaScript 高级教程：深入掌握 Getters 和 Setters-CSDN博客

本文链接：https://blog.csdn.net/caifox/article/details/147868521

在 JavaScript 的世界中，Getters 和 Setters 是一种强大的特性，它们不仅能够增强代码的可读性和可维护性，还能在数据封装、动态计算、校验等方面发挥重要作用。然而，许多开发者在日常开发中并未充分利用这一特性，甚至对其存在误解。本教程旨在深入探讨 Getters 和 Setters 的原理、用法以及最佳实践，帮助你更好地掌握这一高级特性，提升你的 JavaScript 编程水平。

无论你是刚刚接触 JavaScript 的新手，还是已经有一定经验的开发者，本教程都将为你提供有价值的见解和实用的技巧。我们将从基础概念讲起，逐步深入到实际应用案例，帮助你理解 Getters 和 Setters 的强大功能，并展示如何在实际项目中高效地使用它们。

在阅读本教程的过程中，建议你动手实践代码示例，通过实际操作来加深理解。同时，我们也会提供一些思考和练习题，帮助你巩固所学知识。希望本教程能成为你提升 JavaScript 技能的有力工具，让你在编程的道路上更进一步。

现在，就让我们一起开启这段探索 Getters 和 Setters 的旅程吧！

1. JavaScript Getters 和 Setters 基础

1.1 定义与作用

在 JavaScript 中，Getters 和 Setters 是一种特殊的属性，它们允许开发者自定义对象属性的访问和赋值行为。

定义：
- Getter 是一个方法，用于定义对象属性的读取行为。当尝试读取属性值时，Getter 方法会被自动调用。
- Setter 是一个方法，用于定义对象属性的赋值行为。当尝试给属性赋值时，Setter 方法会被自动调用。
  例如，对于一个对象 obj，如果定义了 obj.prop 的 Getter 和 Setter，那么访问 obj.prop 时会调用 Getter，给 obj.prop 赋值时会调用 Setter。
作用：
- 封装性：通过 Getters 和 Setters，可以隐藏对象内部的实现细节，只暴露必要的接口。例如，可以对属性值进行验证或转换，而不暴露实际的存储方式。
- 数据校验：Setters 可以在赋值时进行数据校验，确保属性值符合预期。例如，可以限制属性值的范围或格式。
- 动态计算：Getters 可以返回动态计算的值，而不是固定的存储值。这使得属性可以基于其他属性或逻辑动态生成，而无需额外的方法调用。
- 兼容性：在某些情况下，Getters 和 Setters 可以让对象的接口保持一致，即使内部实现发生了变化。这有助于减少代码的修改和维护成本。
- 示例代码：

const person = {
  _age: 25, // 私有属性
  get age() {
    return this._age;
  },
  set age(value) {
    if (value < 0) {
      throw new Error("Age cannot be negative");
    }
    this._age = value;
  }
};
console.log(person.age); // 25
person.age = 30;
console.log(person.age); // 30
person.age = -5; // 抛出错误

在这个例子中，age 属性通过 Getter 和 Setter 进行了封装，确保了数据的合法性和安全性。

2. Getters 的使用场景

2.1 读取属性值

Getters 在读取属性值时具有多种优势，能够提升代码的可读性和安全性。

隐藏内部实现细节：通过定义 Getter，可以隐藏对象内部的实现细节，只暴露必要的接口。例如，一个对象内部可能使用了多个私有属性来存储数据，但通过 Getter 可以对外提供一个简洁的接口来读取这些数据的组合值。这种方式使得外部代码无需关心对象内部的具体实现，从而降低了代码的耦合性。
提供默认值：当某些属性可能没有明确的值时，Getter 可以返回一个默认值。例如，在一个用户对象中，如果用户的昵称没有设置，Getter 可以返回一个默认的昵称字符串，而不是返回 undefined 或 null。这有助于避免在代码中进行额外的空值检查，提高代码的健壮性。
兼容性处理：在某些情况下，对象的内部实现可能会发生变化，但通过 Getter 可以保持接口的一致性。例如，一个对象的某个属性原本直接存储了一个值，后来改为通过计算得到该值，通过 Getter 可以在不改变外部代码的情况下实现这种内部逻辑的调整。这有助于减少代码的修改和维护成本，提高代码的可维护性。

2.2 计算属性值

Getters 可以用于动态计算属性值，而不是直接返回存储的值。这种方式使得属性可以基于其他属性或逻辑动态生成，而无需额外的方法调用。

基于其他属性计算：Getter 可以根据对象的其他属性动态计算出一个属性的值。例如，在一个矩形对象中，可以通过 Getter 根据矩形的长和宽动态计算矩形的面积，而无需在对象中单独存储一个面积属性。这种方式不仅节省了存储空间，还使得属性的值始终保持最新状态，避免了因属性值不一致而导致的错误。
基于逻辑计算：Getter 可以根据一定的逻辑动态计算出一个属性的值。例如，在一个日期对象中，可以通过 Getter 根据当前日期和时间动态计算出距离某个特定日期的天数，而无需在对象中单独存储这个天数。这种方式使得对象的接口更加灵活，能够根据不同的需求动态提供所需的属性值。
性能优化：在某些情况下，动态计算属性值可能会涉及到复杂的逻辑或大量的数据处理，通过 Getter 可以实现懒加载（Lazy Loading），即只有在真正需要该属性值时才进行计算。这种方式可以避免在对象初始化时进行不必要的计算，从而提高代码的性能。

3. Setters 的使用场景

3.1 设置属性值

Setters 用于定义对象属性的赋值行为，当尝试给属性赋值时，Setter 方法会被自动调用。这种方式使得开发者可以对属性的赋值过程进行精细控制，从而实现多种功能。

封装私有属性：通过 Setters，可以将对象的内部属性设置为私有，只通过 Setter 方法对外暴露赋值接口。例如，一个对象内部的 _age 属性可以通过 set age(value) 方法进行赋值，外部代码无法直接访问 _age，从而保护了对象的内部数据。这种方式增强了代码的安全性和封装性。
自动更新相关属性：在某些情况下，对象的某些属性之间存在关联，当一个属性的值发生变化时，其他相关属性也需要同步更新。通过 Setters，可以在赋值时自动更新这些相关属性。例如，在一个用户对象中，当用户的 name 属性发生变化时，可以通过 Setter 自动更新用户的 displayName 属性，确保对象的状态始终保持一致。
触发事件或通知：在某些应用场景中，当对象的属性值发生变化时，可能需要触发某些事件或通知其他组件。通过 Setters，可以在赋值时添加事件触发或通知逻辑。例如，在一个数据绑定场景中，当对象的某个属性值发生变化时，可以通过 Setter 触发一个事件，通知相关的视图组件进行更新，从而实现数据与视图的同步。

3.2 验证属性值

Setters 在赋值时可以进行数据校验，确保属性值符合预期。这种方式可以有效防止非法或不合理的数据进入对象，从而提高代码的健壮性和可靠性。

限制数据类型：通过 Setters，可以限制属性值的数据类型。例如，对于一个 price 属性，可以通过 Setter 确保其值必须是数字类型。如果赋值时传入了非数字类型的值，则可以抛出错误或进行适当的处理。这种方式可以避免因数据类型不匹配而导致的运行时错误。
限制数据范围：Setters 可以对属性值的范围进行限制。例如，对于一个 age 属性，可以通过 Setter 确保其值在合理的范围内（如 0 到 150）。如果赋值时传入了超出范围的值，则可以抛出错误或进行适当的处理。这种方式可以确保对象的属性值始终处于合理的范围内，避免出现不符合逻辑的数据。
格式化数据：在某些情况下，属性值可能需要符合特定的格式。通过 Setters，可以在赋值时对数据进行格式化。例如，对于一个 date 属性，可以通过 Setter 确保其值符合特定的日期格式（如 YYYY-MM-DD）。如果赋值时传入了不符合格式的值，则可以抛出错误或进行适当的处理。这种方式可以确保对象的属性值始终符合预期的格式，提高代码的可维护性和可读性。

4. Getters 和 Setters 的实现方式

4.1 使用 Object.defineProperty

Object.defineProperty 是 JavaScript 中用于直接操作对象属性的底层方法，它提供了对属性的精细控制，包括定义 Getters 和 Setters。

基本语法：

```
Object.defineProperty(obj, prop, descriptor);
```
- obj：需要定义属性的对象。
- prop：需要定义或修改的属性名称。
- descriptor：一个描述符对象，用于定义属性的特性，如 get 和 set 方法。
定义 Getter：
通过 Object.defineProperty 定义 Getter，可以实现对属性的动态计算和封装。例如：

const rectangle = {
  _width: 10,
  _height: 5
};

Object.defineProperty(rectangle, 'area', {
  get: function () {
    return this._width * this._height;
  }
});

console.log(rectangle.area); // 输出 50

在这个例子中，area 属性通过 Getter 动态计算矩形的面积，而无需在对象中单独存储 area 属性。

定义 Setter：
通过 Object.defineProperty 定义 Setter，可以实现对属性赋值的控制和校验。例如：

const person = {
  _age: 25
};

Object.defineProperty(person, 'age', {
  set: function (value) {
    if (value < 0) {
      throw new Error("Age cannot be negative");
    }
    this._age = value;
  }
});

person.age = 30;
console.log(person._age); // 输出 30

person.age = -5; // 抛出错误

在这个例子中，age 属性通过 Setter 进行了数据校验，确保年龄值不能为负数。

应用场景：
Object.defineProperty 适用于需要对对象属性进行精细控制的场景，例如：
- 封装私有属性：通过 Setter 和 Getter 封装对象的内部实现细节，只暴露必要的接口。
- 动态计算属性值：通过 Getter 动态计算属性值，避免存储冗余数据。
- 数据校验：通过 Setter 在赋值时进行数据校验，确保属性值的合法性。

4.2 使用 class 语法

class 语法是 ES6 引入的面向对象编程的语法糖，它提供了更简洁和直观的方式来定义类和对象，包括 Getters 和 Setters。

基本语法：

class ClassName {
  constructor() {
    // 初始化逻辑
  }

  get propertyName() {
    // Getter 逻辑
  }

  set propertyName(value) {
    // Setter 逻辑
  }
}

定义 Getter：
在 class 中定义 Getter，可以实现对属性的动态计算和封装。例如：

class Rectangle {
  constructor(width, height) {
    this._width = width;
    this._height = height;
  }

  get area() {
    return this._width * this._height;
  }
}

const rect = new Rectangle(10, 5);
console.log(rect.area); // 输出 50

在这个例子中，area 属性通过 Getter 动态计算矩形的面积，而无需在对象中单独存储 area 属性。

定义 Setter：
在 class 中定义 Setter，可以实现对属性赋值的控制和校验。例如：

class Person {
  constructor(age) {
    this._age = age;
  }

  get age() {
    return this._age;
  }

  set age(value) {
    if (value < 0) {
      throw new Error("Age cannot be negative");
    }
    this._age = value;
  }
}

const person = new Person(25);
console.log(person.age); // 输出 25

person.age = 30;
console.log(person.age); // 输出 30

person.age = -5; // 抛出错误

在这个例子中，age 属性通过 Setter 进行了数据校验，确保年龄值不能为负数。

应用场景：
class 语法适用于需要定义复杂对象结构和行为的场景，例如：
- 封装对象行为：通过 class 定义对象的构造函数和方法，实现对象的封装和复用。
- 动态计算属性值：通过 Getter 动态计算属性值，提高代码的可读性和可维护性。
- 数据校验：通过 Setter 在赋值时进行数据校验，确保对象状态的合法性。
- 继承和多态：class 语法支持继承和多态，可以实现更复杂的对象层次结构和行为扩展。

5. Getters 和 Setters 的优势

5.1 封装性增强

Getters 和 Setters 在封装性方面具有显著优势，能够有效保护对象的内部数据和实现细节。

隐藏内部实现：通过 Getters 和 Setters，可以将对象的内部属性设置为私有，只通过这些方法对外暴露接口。例如，一个对象内部的 _age 属性可以通过 set age(value) 和 get age() 方法进行赋值和读取，外部代码无法直接访问 _age，从而保护了对象的内部数据。这种方式增强了代码的安全性和封装性，防止外部代码直接修改内部数据，导致数据的不一致或错误。
数据校验与保护：Setters 可以在赋值时进行数据校验，确保属性值符合预期。例如，对于一个 price 属性，可以通过 Setter 确保其值必须是数字类型且在合理的范围内。如果赋值时传入了非法值，可以抛出错误或进行适当的处理。这种方式可以有效防止非法或不合理的数据进入对象，从而提高代码的健壮性和可靠性。
灵活调整内部逻辑：在某些情况下，对象的内部实现可能会发生变化，但通过 Getters 和 Setters 可以保持接口的一致性。例如，一个对象的某个属性原本直接存储了一个值，后来改为通过计算得到该值，通过 Getters 和 Setters 可以在不改变外部代码的情况下实现这种内部逻辑的调整。这有助于减少代码的修改和维护成本，提高代码的可维护性。

5.2 代码可读性提升

Getters 和 Setters 能够显著提升代码的可读性和可维护性，使代码更加简洁和易于理解。

语义化访问：使用 Getters 和 Setters 可以让属性的访问和赋值操作更加语义化。例如，person.age 的读取和赋值操作看起来就像直接访问一个普通属性，但实际上通过 Getters 和 Setters 实现了复杂的逻辑。这种方式使得代码更加直观，易于理解和维护。
减少冗余代码：通过 Getters 和 Setters，可以避免在代码中直接访问和修改对象的内部属性，从而减少冗余代码。例如，动态计算属性值时，可以通过 Getters 实现，而无需在对象中单独存储这些值。这种方式不仅节省了存储空间，还使得代码更加简洁。
统一接口：Getters 和 Setters 提供了一种统一的接口来访问和修改对象的属性，无论内部实现如何变化，外部代码始终可以通过相同的接口进行操作。这种方式使得代码更加一致，减少了因接口变化而导致的错误，提高了代码的可维护性。

6. Getters 和 Setters 的注意事项

6.1 性能影响

使用 Getters 和 Setters 虽然可以带来诸多好处，但也会对性能产生一定影响，需要谨慎权衡。

调用开销：每次通过 Getter 或 Setter 访问或设置属性时，都会调用相应的方法，这比直接访问或设置属性多了一次函数调用的开销。在频繁访问或设置属性的场景中，这种开销可能会累积，导致性能下降。例如，在一个性能敏感的动画渲染场景中，如果频繁通过 Getter 获取对象的属性值，可能会导致帧率降低。
复杂逻辑影响：如果 Getter 或 Setter 中包含复杂的逻辑，如大量的计算、数据处理或网络请求等，会对性能产生更显著的影响。例如，在一个 Getter 中动态计算一个复杂的数学公式，或者在 Setter 中对大量数据进行格式化和校验，都会增加每次访问或设置属性的时间开销。
内存占用：定义 Getters 和 Setters 会增加对象的内存占用，因为它们本质上是对象的方法。虽然这种内存占用通常较小，但在大量对象使用 Getters 和 Setters 的情况下，可能会对内存使用产生一定影响。例如，在一个包含数万个对象的应用中，每个对象都定义了多个 Getters 和 Setters，可能会导致内存占用显著增加。

6.2 使用场景限制

尽管 Getters 和 Setters 提供了强大的功能，但在某些场景下并不适用或需要谨慎使用。

简单属性访问：对于简单的属性访问和赋值，直接使用普通属性通常更高效。如果属性的值不需要进行任何特殊处理或校验，使用普通属性可以避免不必要的方法调用开销。例如，对于一个简单的用户对象，其 name 和 age 属性不需要进行复杂的校验或计算，直接使用普通属性即可。
频繁修改属性值：如果一个属性的值需要频繁修改，使用 Setter 可能会增加不必要的性能开销。在这种情况下，可以考虑将属性设置为普通属性，或者通过其他方式实现数据校验和封装。例如，在一个实时数据处理系统中，某些属性的值需要每秒更新多次，频繁调用 Setter 可能会导致性能问题。
与其他库或框架的兼容性：在某些情况下，使用 Getters 和 Setters 可能会影响与其他库或框架的兼容性。一些库或框架可能依赖于直接访问对象的属性，而不是通过 Getters 和 Setters。在这种情况下，使用 Getters 和 Setters 可能会导致意外的行为或错误。例如，在某些旧版本的浏览器或框架中，对 Getters 和 Setters 的支持可能不完善，可能会导致兼容性问题。
调试困难：由于 Getters 和 Setters 的存在，代码的执行路径可能会变得复杂，这可能会增加调试的难度。在调试过程中，可能需要额外的步骤来跟踪 Getters 和 Setters 的调用，以及它们内部的逻辑。例如，当出现属性值不符合预期的情况时，可能需要检查 Getter 和 Setter 的实现，以及它们的调用顺序，这可能会增加调试的时间和复杂性。

7. 实际案例分析

7.1 数据模型中的应用

在数据模型中，Getters 和 Setters 能够有效提升数据的封装性和安全性，同时实现数据的动态计算和校验。

封装私有数据：通过 Setters 将数据模型中的核心数据设置为私有属性，仅通过 Setters 和 Getters 进行访问和修改，可以防止外部代码直接操作内部数据，避免数据被非法篡改。例如，在一个用户数据模型中，用户的密码可以通过 Setter 进行加密存储，通过 Getter 提供加密后的密码，确保密码的安全性。
动态计算属性：在数据模型中，某些属性可能需要基于其他属性动态计算得出。通过 Getters，可以实现这种动态计算，而无需在模型中存储冗余数据。例如，在一个订单数据模型中，订单的总金额可以通过 Getter 根据订单中的商品数量和单价动态计算得出，从而节省存储空间并确保数据的一致性。
数据校验与格式化：Setters 可以在赋值时对数据进行校验和格式化，确保数据的合法性和一致性。例如，在一个日期数据模型中，日期属性可以通过 Setter 确保其值符合特定的日期格式（如 YYYY-MM-DD），如果赋值时传入了不符合格式的值，则可以抛出错误或进行适当的处理，从而保证数据的准确性。
性能优化：在某些情况下，数据模型中的某些属性可能需要进行复杂的计算，通过 Getters 可以实现懒加载（Lazy Loading），即只有在真正需要该属性值时才进行计算，从而提高数据模型的性能。例如，在一个大数据分析模型中，某些统计指标的计算可能非常耗时，通过 Getters 可以在需要时才进行计算，避免在模型初始化时进行不必要的计算。

7.2 界面交互中的应用

在界面交互中，Getters 和 Setters 可以实现数据与视图的同步更新，提升用户体验和代码的可维护性。

数据绑定与同步：在现代前端框架中，Getters 和 Setters 常用于实现数据与视图的双向绑定。当数据模型中的属性值发生变化时，通过 Setters 可以触发视图的更新；当用户在界面上进行操作时，通过 Setters 可以更新数据模型中的属性值，从而实现数据与视图的同步。例如，在一个表单应用中，用户输入的值可以通过 Setters 更新到数据模型中，同时通过 Getters 将数据模型中的值绑定到表单控件上，实现表单数据的实时更新。
触发事件与通知：在界面交互中，某些操作可能需要触发特定的事件或通知其他组件。通过 Setters，可以在赋值时添加事件触发或通知逻辑，从而实现组件之间的通信和协同工作。例如，在一个购物车应用中，当用户修改商品数量时，通过 Setter 可以触发一个事件，通知总价计算组件更新总价，从而实现购物车总价的实时更新。
动态计算视图属性：在界面交互中，某些视图属性可能需要基于其他数据动态计算得出。通过 Getters，可以实现这种动态计算，而无需在视图代码中进行复杂的逻辑处理。例如，在一个布局组件中，组件的宽度可以通过 Getter 根据父组件的宽度动态计算得出，从而实现响应式布局。
提升用户体验：通过 Getters 和 Setters，可以实现更加灵活和智能的界面交互逻辑，提升用户体验。例如，在一个图片浏览应用中，可以通过 Getters 动态计算图片的缩放比例，根据用户的操作自动调整图片的显示效果；通过 Setters，可以在用户切换图片时进行数据校验和预加载，确保图片的快速加载和显示。