如何利用 new.target 原生机制构建极简的前端 AOP 切面编程容器-js教程-PHP中文网

new.target 不能单独实现 aop，仅能作为构造器钩子辅助识别目标类；真正 aop 需 proxy 等机制拦截方法调用，配合 new.target 做实例化时机判断。

如何利用 new.target 原生机制构建极简的前端 aop 切面编程容器

new.target 是 JavaScript 中用于检测函数是否被 new 调用的元属性，它本身并不提供方法拦截、代理或织入能力，也无法直接实现 AOP 的核心行为（如在方法执行前后注入逻辑）。因此，不能仅靠 new.target 构建一个真正意义上的 AOP 容器——它既不是代理机制，也不具备切点（Pointcut）匹配、通知（Advice）调度或织入（Weaving）能力。

但如果你追求“极简”且“原生”，可以将 new.target 作为轻量级构造器钩子，配合其他原生手段（如 Proxy、Object.defineProperty 或装饰器模式），在类实例化阶段做统一增强入口。下面分场景说明可行路径与关键限制：

✅ 可行方向：用 `new.target` 辅助识别“被增强类”的构造意图

new.target 在构造函数中指向当前被 new 的类（而非父类），可用于：

区分是否为原始目标类实例化（而非代理类或包装类）
在基类中统一收集子类元信息（如需标记哪些类应被 AOP 拦截）

class AspectBase {
  constructor() {
    // 只有直接 new 子类时，new.target === 子类
    if (new.target !== AspectBase) {
      console.log('正在实例化切面目标类:', new.target.name);
      // 此处可触发注册、打标、或返回代理实例（需额外逻辑）
    }
  }
}

class UserService extends AspectBase {
  getUser() { return { id: 1 }; }
}

⚠️ 注意：这不拦截方法调用，只发生在构造阶段，离 AOP 的“方法级横切”还很远。

✅ 真正能支撑 AOP 的原生机制（必须搭配 `new.target` 使用）

要实现“方法执行前/后/异常时增强”，必须引入以下至少一种原生能力：

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

1. `Proxy`（推荐）——运行时方法拦截主力

function createAopProxy(target, aspect) {
  return new Proxy(target, {
    get(obj, prop, receiver) {
      const value = Reflect.get(obj, prop, receiver);
      if (typeof value === 'function' && prop !== 'constructor') {
        return function (...args) {
          aspect.before?.(prop, args);
          try {
            const result = value.apply(this, args);
            aspect.after?.(prop, args, result);
            return result;
          } catch (err) {
            aspect.error?.(prop, args, err);
            throw err;
          }
        };
      }
      return value;
    }
  });
}

// 使用
const userService = createAopProxy(
  new UserService(),
  {
    before: (method) => console.log(`→ ${method}`),
    after: (method) => console.log(`← ${method}`)
  }
);

✅ 这才是 AOP 的实质：对方法访问做动态拦截与增强。
new.target 在这里可用来判断 target 是否为预期类（比如在 createAopProxy 内部做校验），但非必需。

2. `Object.defineProperty` + `get/set`（仅限已知属性名）

适合固定方法名、不依赖运行时反射的极简场景，但无法自动覆盖新增方法。

3. 类装饰器（Stage 3 提案，现代浏览器 & TS 支持良好）

虽非“原生关键字”，但已是事实标准，且可自然结合 new.target 做类级标记：

function Trackable() {
  return function<t extends new any>(target: T) {
    const original = target.prototype.constructor;
    target.prototype.constructor = function (...args: any[]) {
      const instance = Reflect.construct(original, args, new.target);
      // 此处可返回 Proxy 包装的 instance
      return createAopProxy(instance, { before: () => console.log('tracked') });
    };
  };
}

@Trackable()
class OrderService {
  placeOrder() { /* ... */ }
}</t>

❌ `new.target` 单独不能做什么？

无法监听 obj.method() 调用（无方法拦截）
无法修改已有对象的方法行为（无重写/代理能力）
不提供切点表达式（如 execution(* service.*.*(..))）
不支持环绕通知（@Around）、异常通知等语义
不能替代 Proxy、Reflect、defineProperty 等真正可操作运行时行为的 API

✅ 极简 AOP 容器骨架（原生 + `new.target` 辅助）

class AopContainer {
  static aspects = new Map();

  static use(aspect) {
    this.aspects.set(aspect.id || Symbol(), aspect);
  }

  static enhance(TargetClass) {
    return class extends TargetClass {
      constructor(...args) {
        super(...args);
        // new.target === 当前派生类 → 确保是目标实例化
        if (new.target === this.constructor) {
          return AopContainer.wrapInstance(this);
        }
        return this;
      }
    };
  }

  static wrapInstance(instance) {
    const handlers = Array.from(this.aspects.values());
    return new Proxy(instance, {
      get(target, prop) {
        const val = target[prop];
        if (typeof val === 'function') {
          return function (...a) {
            handlers.forEach(h => h.before?.(prop, a));
            try {
              const r = val.apply(this, a);
              handlers.forEach(h => h.after?.(prop, a, r));
              return r;
            } catch (e) {
              handlers.forEach(h => h.error?.(prop, a, e));
              throw e;
            }
          };
        }
        return val;
      }
    });
  }
}

// 使用
AopContainer.use({
  id: 'logger',
  before: (m) => console.log('[LOG] enter', m)
});

const Service = AopContainer.enhance(class {
  getData() { return 'data'; }
});

console.log(new Service().getData()); // [LOG] enter getData → 'data'

这个容器：