JavaScript 中怎么用原型链实现对象方法的切面编程-js教程-PHP中文网

javascript虽不原生支持aop，但可通过原型链劫持、函数包装和proxy等机制模拟：在不修改原逻辑前提下动态插入前置/后置/异常处理逻辑，适用于日志、权限等横切关注点。

javascript 中怎么用原型链实现对象方法的切面编程

JavaScript 中不直接支持传统面向对象语言里的“切面编程”（AOP），但可以通过原型链、函数劫持和代理等机制模拟核心思想——在不修改原方法逻辑的前提下，动态地在方法执行前、后或异常时插入额外行为（如日志、权限检查、性能统计）。原型链本身不是 AOP 工具，但它提供了方法共享与继承的基础，配合方法重写/包装，就能实现轻量级的切面能力。

1. 在原型上劫持并包装原有方法

核心思路：保存原始方法，用新函数包裹它，在调用前后插入横切逻辑。

例如给 Array.prototype.map 添加统一的日志切面：

const originalMap = Array.prototype.map;
Array.prototype.map = function(...args) {
  console.log(`[AOP] map called on array of length ${this.length}`);
  const result = originalMap.apply(this, args);
  console.log(`[AOP] map completed, result length: ${result.length}`);
  return result;
};

⚠️ 注意：这种方式会影响所有数组实例，慎用于内置原型；生产环境更推荐作用于自定义类原型。

2. 为自定义类原型批量添加切面方法

定义一个通用的“增强器”，自动包装原型上的指定方法：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

function addAspect(proto, methodName, before, after, onError) {
  const original = proto[methodName];
  if (typeof original !== 'function') return;
<p>proto[methodName] = function(...args) {
try {
before && before.call(this, ...args);
const result = original.apply(this, args);
after && after.call(this, result, ...args);
return result;
} catch (err) {
onError && onError.call(this, err, ...args);
throw err;
}
};
}</p><p>// 使用示例
class Calculator {
add(a, b) { return a + b; }
multiply(a, b) { return a * b; }
}</p><p>addAspect(Calculator.prototype, 'add', 
() => console.log('→ add start'), 
(res) => console.log(<code>← add done: ${res}</code>),
(err) => console.error('× add failed:', err)
);</p>

3. 基于原型链的“可插拔”切面设计

让切面逻辑可组合、可卸载，避免污染原始原型：

不直接改写原型方法，而是创建带切面的新构造函数或混入对象
利用 Object.setPrototypeOf() 或 class extends 构建增强版原型链
切面逻辑封装为独立函数，通过高阶函数返回包装后的方法

例如：

function withLogging(fn) {
  return function(...args) {
    console.log(`[LOG] ${fn.name}(${args.join(', ')})`);
    const res = fn.apply(this, args);
    console.log(`[LOG] → ${res}`);
    return res;
  };
}
<p>class EnhancedCalculator extends Calculator {
constructor() {
super();
this.add = withLogging(this.add.bind(this));
}
}</p>