以下是一个属性装饰器的废弃语法的有趣案例，其中我们使用value 去缓存值的时候是有 bug 的。

属性装饰器用于切面编程（AOP），我们在读取或者修改对象的属性的时候，去做一些额外的操作。

function State(target: object, property: string) {
  let value: any;
  Object.defineProperty(target, property, {
    get() {
      return value;
    },
    set(newValue) {
      // run code: do something
      console.log(`${property} 的最新值 ${value}`);
      value = newValue;
    },
  });
}
class Person {
  name: string;
  @State age: number;
  // age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}
const p1 = new Person("张三", 18); // 输出：age 的最新值 18
const p1 = new Person("李三", 28); // 输出：age 的最新值 28
p1.age = 30; // 输出：age 的最新值 30
p2.age = 40; // 输出：age 的最新值 40
console.log(p1.age); // 输出：40
console.log(p2.age); // 输出：40

以上代码修改为：

function State(target: object, property: string) {
  let key = `_${property}`;
  Object.defineProperty(target, property, {
    get() {
      return this[key];
    },
    set(newValue) {
      // run code: do something
      console.log(`${property} 的最新值 ${value}`);
      this[key] = newValue;
    },
  });
}
class Person {
  name: string;
  @State age: number;
  // age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}
const p1 = new Person("张三", 18); // 输出：age 的最新值 18
const p1 = new Person("李三", 28); // 输出：age 的最新值 28
p1.age = 30; // 输出：age 的最新值 30
p2.age = 40; // 输出：age 的最新值 40
console.log(p1.age); // 输出：30
console.log(p2.age); // 输出：40

其实就是相当于每次在修改age的时候，同步创建并修改_age的值。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24