如何自动拦截类实例中的所有错误并导向错误处理方法？

当然有办法实现这种自动捕获类内方法错误的需求！咱们可以通过Proxy代理或者方法包装/装饰器两种主流方式来搞定，下面给你详细拆解方案，顺便聊聊Angular类似实现的底层思路：

方案一：使用Proxy代理拦截方法调用 #

Proxy是ES6提供的元编程工具，可以拦截对象的各种操作，包括方法调用。我们可以用它来包裹类的实例，自动给所有方法加上错误捕获逻辑：

class Foo {
  doSomething() { throw 'error'; }
  doOtherthing() { throw 'error2'; }
  handleError(e) {
    console.log('捕获到错误:', e);
  }
}

// 封装一个创建带错误捕获实例的函数
function createErrorHandledInstance(Cls) {
  return new Proxy(new Cls(), {
    get(target, prop) {
      const value = target[prop];
      // 判断当前属性是否是可调用的方法（排除错误处理方法本身）
      if (typeof value === 'function' && prop !== 'handleError') {
        return function(...args) {
          try {
            return value.apply(target, args);
          } catch (e) {
            // 出错时调用指定的错误处理方法
            target.handleError(e);
          }
        };
      }
      return value;
    }
  });
}

// 测试
const foo = createErrorHandledInstance(Foo);
foo.doSomething(); // 会输出：捕获到错误: error
foo.doOtherthing(); // 会输出：捕获到错误: error2

这个方案的好处是不需要修改原类的代码，完全通过代理实现拦截，对原类的侵入性极低。

方案二：用装饰器或构造函数自动包装类方法 #

如果你习惯用装饰器语法（需要配置Babel或TypeScript支持），可以给类的方法统一加上错误捕获的装饰器：

// 定义一个错误捕获装饰器
function catchAndForward(handlerName) {
  return function(target, prop, descriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function(...args) {
      try {
        return originalMethod.apply(this, args);
      } catch (e) {
        this[handlerName](e);
      }
    };
    return descriptor;
  };
}

class Foo {
  @catchAndForward('handleError')
  doSomething() { throw 'error'; }

  @catchAndForward('handleError')
  doOtherthing() { throw 'error2'; }

  handleError(e) {
    console.log('捕获到错误:', e);
  }
}

// 测试
const foo = new Foo();
foo.doSomething(); // 输出：捕获到错误: error

如果不想手动给每个方法加装饰器，还可以在类的构造函数里遍历原型方法，自动包装：

class Foo {
  constructor() {
    // 遍历原型上的方法，自动添加错误捕获逻辑
    Object.getOwnPropertyNames(Foo.prototype).forEach(prop => {
      if (prop !== 'constructor' && prop !== 'handleError' && typeof this[prop] === 'function') {
        const original = this[prop];
        this[prop] = (...args) => {
          try {
            return original.apply(this, args);
          } catch (e) {
            this.handleError(e);
          }
        };
      }
    });
  }

  doSomething() { throw 'error'; }
  doOtherthing() { throw 'error2'; }
  handleError(e) {
    console.log('捕获到错误:', e);
  }
}

Angular的类似实现原理 #

你提到的Angular全局错误处理，核心依赖两个关键点：

1. Zone.js（NgZone）：Angular会把所有应用代码包裹在NgZone中，Zone.js可以追踪所有异步操作（比如Promise、setTimeout、事件监听），当异步操作抛出错误时，Zone会捕获这些错误并转发到全局的ErrorHandler。
2. 依赖注入的全局错误处理器：Angular提供了ErrorHandler基类，你可以自定义实现并注入到应用中，Angular内部的各种操作（组件生命周期钩子、HTTP请求、路由守卫等）都会在内部做try-catch，把错误统一交给ErrorHandler处理。

本质上和咱们上面的方案思路一致：通过包装/拦截可能出错的操作，统一捕获错误并转发到指定处理逻辑，只是Angular做了更全面的封装，覆盖了同步、异步以及框架自身的各种场景。

内容的提问来源于stack exchange，提问作者Fan Cheung