什么是JavaScript的装饰器在类属性转换中的作用，以及它如何实现自动绑定或类型检查？

/**
 * @bound 装饰器：自动将类方法绑定到实例上，确保 `this` 上下文正确。
 * 适用于类方法（非箭头函数定义的属性）。
 */
function bound(target, key, descriptor) {
  // 确保装饰器应用于方法
  if (typeof descriptor.value !== 'function') {
    throw new Error(`@bound 装饰器只能应用于方法，而非属性 '${key}'`);
  }

  const originalMethod = descriptor.value; // 获取原始方法

  return {
    configurable: true, // 允许该属性的描述符在以后被修改
    enumerable: false,  // 通常，绑定的方法不希望被枚举
    get() {
      // 'this' 在这里指向类的实例。
      // 首次访问时，我们创建一个绑定到当前实例的方法。
      const boundFn = originalMethod.bind(this);

      // 关键优化：覆盖当前实例上的属性，使其直接返回绑定的函数。
      // 这样，后续访问该属性时，就不会再进入这个 getter，
      // 而是直接拿到缓存的绑定函数，避免重复绑定和额外的 getter 调用开销。
      Object.defineProperty(this, key, {
        value: boundFn,
        configurable: true,
        writable: true, // 允许该属性的值在以后被修改（尽管通常不这么做）
        enumerable: false,
      });

      return boundFn;
    },
    // 注意：这里没有 'set'，因为我们处理的是方法，通常不希望其被重新赋值。
    // 如果是类属性（class field）的装饰器，处理方式会略有不同。
  };
}

class MyComponent {
  name = '组件实例';

  constructor() {
    console.log('MyComponent 实例创建');
  }

  @bound
  handleClick() {
    console.log(`${this.name} 被点击了！`);
  }

  // 没有使用 @bound 的方法，用于对比
  handleUnboundClick() {
    console.log(`${this.name} 被点击了（未绑定）！`);
  }
}

const component = new MyComponent();
const { handleClick, handleUnboundClick } = component;

// 使用 @bound 的方法，this 始终指向 component 实例
handleClick(); // 输出: "组件实例 被点击了！"

// 未使用 @bound 的方法，this 会丢失
try {
  handleUnboundClick(); // 可能会报错，因为 this 可能是 undefined 或全局对象
} catch (e) {
  console.error("未绑定方法调用错误:", e.message); // 实际环境中会因 'this.name' 导致错误
}

// 模拟事件监听器
setTimeout(handleClick, 100); // 100ms 后，this 依然正确

// 模拟事件监听器，未绑定方法会出问题
// setTimeout(handleUnboundClick, 200); // 200ms 后，this 丢失，会报错

/**
 * @typeCheck 装饰器：在运行时对属性赋值进行类型检查。
 * @param {Function} expectedType 期望的构造函数（如 String, Number, Boolean, Array, Object）。
 */
function typeCheck(expectedType) {
  return function (target, key, descriptor) {
    const originalSetter = descriptor.set;
    const originalInitializer = descriptor.initializer; // 对于 class fields

    return {
      ...descriptor, // 保留原始描述符的其它属性
      set(value) {
        // 允许 null 或 undefined
        if (value === null || value === undefined) {
          if (originalSetter) {
            originalSetter.call(this, value);
          } else {
            this[key] = value; // 直接赋值给实例属性
          }
          return;
        }

        // 进行类型检查
        if (typeof value !== typeof expectedType()) { // 简单检查原始类型
            throw new TypeError(`属性 '${String(key)}' 期望类型为 ${expectedType.name}，但得到的是 ${typeof value}。`);
        }
        if (expectedType === Array && !Array.isArray(value)) {
            throw new TypeError(`属性 '${String(key)}' 期望类型为 Array，但得到的是非数组类型。`);
        }
        if (expectedType === Object && (typeof value !== 'object' || Array.isArray(value))) {
            throw new TypeError(`属性 '${String(key)}' 期望类型为 Object，但得到的是非对象类型。`);
        }

        // 如果通过检查，调用原始的 setter 或直接赋值
        if (originalSetter) {
          originalSetter.call(this, value);
        } else {
          // 对于 class fields，直接在实例上设置值
          Object.defineProperty(this, key, {
            value: value,
            writable: true,
            configurable: true,
            enumerable: true,
          });
        }
      },
      // 对于 class fields，还需要处理初始值
      initializer() {
        const initialValue = originalInitializer ? originalInitializer.call(this) : undefined;
        if (initialValue !== null && initialValue !== undefined) {
          // 对初始值进行类型检查
          if (typeof initialValue !== typeof expectedType()) {
            throw new TypeError(`属性 '${String(key)}' 的初始值期望类型为 ${expectedType.name}，但得到的是 ${typeof initialValue}。`);
          }
        }
        return initialValue;
      }
    };
  };
}

class User {
  @typeCheck(String)
  name;

  @typeCheck(Number)
  age = 30;

  constructor(name, age) {
    this.name = name; // 触发 setter
    this.age = age;   // 触发 setter
  }
}

try {
  const user1 = new User("Alice", 25);
  console.log(user1.name, user1.age); // Alice 25

  user1.name = "Bob";
  console.log(user1.name); // Bob

  // user1.age = "thirty"; // 这会抛出 TypeError
  // console.log(user1.age);

  // const user2 = new User(123, 20); // 构造函数中的 name 赋值会抛出 TypeError
} catch (error) {
  console.error("类型检查错误:", error.message);
}