Angular Component Class 对象属性的 set 和 get 访问器

在 Angular 中，get 和 set 关键字通常被称作访问器。通过这些访问器，开发人员可以控制对对象属性的读取和写入操作。这在 Angular 组件中也很常见，特别是在需要动态更新视图或者计算属性值的时候。让我们深入探讨 get 和 set 关键字的作用及其使用场景。

在 JavaScript 中，get 和 set 是 ES6 引入的特性，这些可以让我们非常优雅地在对象中定义访问器属性。类似于面向对象编程中的属性和方法，通过 get 访问器，属性值在读取时可以经过一些自定义的操作。而 set 访问器则用来在属性值被写入时执行特定的逻辑。在 TypeScript 中，get 和 set 同样得到了良好的支持，可以定义在类中。

在 Angular 中，使用 get 和 set 关键字，可以增加组件数据绑定的灵活性，允许我们在数据实际被读取或写入时添加额外的逻辑。比如我们可能想在属性改变时做一些计算或者更新 DOM。通过访问器，可以轻松实现这一点。

示例一：基本的 get 和 set 使用

class Person {
  private _name: string;

  constructor(name: string) {
    this._name = name;
  }

  get name(): string {
    console.log(`Getting name: ${this._name}`);
    return this._name;
  }

  set name(newName: string) {
    console.log(`Setting name to: ${newName}`);
    this._name = newName;
  }
}

const person = new Person(`John`);
console.log(person.name);  // 输出：Getting name: John
person.name = `Doe`;       // 输出：Setting name to: Doe
console.log(person.name);  // 输出：Getting name: Doe

在这个示例中，get 和 set 访问器用于读取和设置 _name 的值。每次读取或写入 _name 时，控制台都会输出一条记录，显示当前操作。这可以帮助我们调试代码，并确保属性值始终保持正确。

示例二：在 Angular 组件中使用 get 和 set

考虑一个 Angular 组件，其中我们希望在属性值更新时自动更新组件模板中的一些数据显示。这时候 get 和 set 非常有用。

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div>
      <h1>{{ capitalizedUsername }}</h1>
      <input [(ngModel)]="username" placeholder="Enter your name">
    </div>
  `
})
export class ExampleComponent {
  private _username: string = '';

  get username(): string {
    return this._username;
  }

  set username(value: string) {
    this._username = value.trim();
    this.capitalizedUsername = value.charAt(0).toUpperCase() + value.slice(1);
  }

  capitalizedUsername: string = '';
}

这个示例中，我们定义了一个 ExampleComponent 组件，并在其内部使用 username 属性。username 属性在读取时返回 _username 的值，而在写入时，通过 set 访问器进行一些处理，包括去掉前后空格并将第一个字母大写，同时将处理后的值赋给 capitalizedUsername。

通过双向数据绑定 [(ngModel)]，我们可以在输入框中直接修改 username 属性。每当用户输入变化时，set 访问器都会被触发，更新 capitalizedUsername 的值，并自动在模板中显示为大写的形式。

高级示例：使用访问器进行验证

有时，我们需要在更新属性值时进行一些验证操作。例如，假设我们有一个表单组件，用户输入的数据需要满足一定的验证条件。通过 set 访问器，我们可以在数据被设置时执行验证逻辑。

import { Component } from '@angular/core';

@Component({
  selector: 'app-form',
  template: `
    <div>
      <label for="email">Email:</label>
      <input id="email" [(ngModel)]="email">
      <div *ngIf="emailError" class="error">{{ emailError }}</div>
    </div>
  `
})
export class FormComponent {
  private _email: string = '';
  emailError: string = '';

  get email(): string {
    return this._email;
  }

  set email(value: string) {
    if (this.validateEmail(value)) {
      this._email = value;
      this.emailError = '';
    } else {
      this.emailError = `Invalid email format`;
    }
  }

  private validateEmail(email: string): boolean {
    const emailPattern = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
    return emailPattern.test(email);
  }
}

在这个示例中，我们有一个 FormComponent 组件，用户在输入框中输入 email 地址时，使用双向数据绑定更新 email 属性。在 set 访问器中，调用 validateEmail 方法进行 email 格式的验证，如果验证通过，则更新 _email。如验证失败，则设置 emailError 属性，以显示错误信息。

通过以上示例，我们可以看到如何利用 get 和 set 访问器不仅可以控制属性的访问，还可以在属性值变化时触发特定的逻辑，使组件的行为更加灵活和动态。

深层分析 get 与 set 优点

1. 封装性：通过 get 和 set 访问器，可以确保对象内部属性的只读性或带条件读写。它们在封装对象行为方面非常强大，使得对象的内部状态不能被随意更改。
2. 数据验证：set 访问器特别适合在属性值被写入时进行数据验证和条件检查。这样可以确保对象的状态始终处于一致性和正确性。
3. 惰性求值：通过 get 访问器，我们可以实现惰性求值（即属性值在需要时才被计算）。这对于一些计算开销较大的属性来说非常重要。
4. 数据绑定的灵活性：在 Angular 这样的框架中，使用 get 和 set 配合数据绑定可以实现更复杂的逻辑，而不需要在模板中编写复杂的表达式。

更多实战中的应用

在实际项目中，get 和 set 访问器可以应用于各种复杂的场景中。例如，在处理用户输入、表单验证、数据格式化以及计算和缓存一些动态生成的属性值时，这些访问器都可以发挥至关重要的作用。

1. 延迟初始化：

class DataService {
  private _data: any;

  get data(): any {
    if (!this._data) {
      this._data = this.fetchData();
    }
    return this._data;
  }

  private fetchData(): any {
    // 假设这里是异步数据获取操作
    return { id: 1, name: `Sample Data` };
  }
}

在以上示例中，get 访问器实现了延迟初始化，在首次访问 data 属性时才会从某个地方获取数据，并进行缓存。这种模式在处理一些昂贵的或异步的数据获取操作时非常有用。

2. 动态属性生成：

class Item {
  private _price: number = 0;
  private _quantity: number = 0;

  get totalCost(): number {
    return this._price * this._quantity;
  }

  set price(value: number) {
    this._price = value;
  }

  set quantity(value: number) {
    this._quantity = value;
  }
}

const item = new Item();
item.price = 10;
item.quantity = 3;
console.log(item.totalCost); // 输出：30

利用 get 访问器动态生成 totalCost 属性，通过 price 和 quantity 拟合出总价金额。只有在读取 totalCost 时才会执行计算逻辑。

3. 多步验证和调整：

class User {
  private _age: number;

  get age(): number {
    return this._age;
  }

  set age(value: number) {
    if (isNaN(value)) {
      throw new Error(`Age must be a number`);
    } else if (value < 0) {
      throw new Error(`Age cannot be negative`);
    } else {
      this._age = Math.floor(value);  // 确保年龄是整数
    }
  }
}

const user = new User();
try {
  user.age = 22.5;
  console.log(user.age);  // 输出：22
} catch (error) {
  console.error(error.message);
}

这里展示了在访问器中结合多步验证和属性调整的例子。确保输入值满足一系列条件，并进行必要的转换，使得对象的状态总是有效而稳定的。