JS如何实现装饰器？装饰器模式应用

@decorator

// 简单的日志装饰器
function logDecorator(func) {
  return function(...args) {
    console.log(`Calling function: ${func.name || 'anonymous'} with args:`, args);
    const result = func.apply(this, args); // 保持this上下文
    console.log(`Function ${func.name || 'anonymous'} returned:`, result);
    return result;
  };
}

// 简单的缓存装饰器
function memoizeDecorator(func) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args); // 简单的缓存键生成
    if (cache[key]) {
      console.log(`Cache hit for ${func.name || 'anonymous'} with args:`, args);
      return cache[key];
    }
    console.log(`Cache miss for ${func.name || 'anonymous'} with args:`, args);
    const result = func.apply(this, args);
    cache[key] = result;
    return result;
  };
}

// 示例应用
function add(a, b) {
  return a + b;
}

const loggedAdd = logDecorator(add);
loggedAdd(1, 2); // 会输出日志

const memoizedAdd = memoizeDecorator(add);
memoizedAdd(3, 4); // 第一次计算并缓存
memoizedAdd(3, 4); // 第二次直接从缓存获取

@

// @sealed 装饰器：让类不可扩展，属性不可配置
function sealed(constructor) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
  return constructor; // 可以选择返回原构造函数或新的构造函数
}

// @logClass 装饰器：打印类被创建时的信息
function logClass(constructor) {
  console.log(`Class ${constructor.name} was defined.`);
  return class extends constructor {
    constructor(...args) {
      super(...args);
      console.log(`Instance of ${constructor.name} created.`);
    }
  };
}

@sealed
@logClass // 多个装饰器会从下往上执行，但实际应用时，类装饰器通常是修改或替换类本身
class MyClass {
  constructor(name) {
    this.name = name;
  }

  greet() {
    return `Hello, ${this.name}!`;
  }
}

const instance = new MyClass('World');
console.log(instance.greet());

// 尝试修改或扩展 MyClass 会失败
try {
  MyClass.prototype.newMethod = function() {};
} catch (e) {
  console.error("Cannot add new method to sealed class prototype:", e.message);
}

target

key

descriptor

descriptor.value

// @readonly 装饰器：让方法变为只读（不可修改、不可删除）
function readonly(target, key, descriptor) {
  descriptor.writable = false;
  return descriptor;
}

// @deprecate 装饰器：标记方法已废弃
function deprecate(message) {
  return function(target, key, descriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function(...args) {
      console.warn(`Warning: Method "${key}" is deprecated. ${message}`);
      return originalMethod.apply(this, args);
    };
    return descriptor;
  };
}

class User {
  constructor(name) {
    this.name = name;
  }

  @readonly
  getName() {
    return this.name;
  }

  @deprecate('Please use getName() instead.')
  oldGetName() {
    return this.name;
  }
}

const user = new User('Alice');
console.log(user.getName());
user.oldGetName(); // 会触发废弃警告

// 尝试修改 getName 方法会失败
try {
  user.getName = function() { return 'New Name'; };
} catch (e) {
  console.error("Cannot reassign readonly method:", e.message);
}

function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  }
  return n * factorial(n - 1);
}

factorial

// 性能监控装饰器
function measurePerformance(originalFunc) {
  return function(...args) { // 返回一个新的函数
    const start = performance.now(); // 记录开始时间
    const result = originalFunc.apply(this, args); // 调用原始函数，并保持this上下文
    const end = performance.now(); // 记录结束时间
    console.log(`${originalFunc.name || 'anonymous'} took ${end - start} ms to execute.`);
    return result; // 返回原始函数的执行结果
  };
}

// 应用装饰器
const measuredFactorial = measurePerformance(factorial);

// 调用被装饰的函数
console.log(measuredFactorial(5));
console.log(measuredFactorial(10));

measurePerformance

factorial

measuredFactorial

measuredFactorial

measurePerformance

factorial

measurePerformance

logDecorator

@

@