JavaScript扩展Error类时获取子类名称及方法调用问题

这个问题的核心原因是Babel 6在转译ES6类继承内置构造函数（比如Error）时，没有正确处理原型链。原生Error构造函数在执行时会自行创建并返回一个对象，导致自定义Error类的实例原型链被打断，从而无法正确访问自定义类的constructor.name和原型方法。

下面提供几种在Babel v6环境下兼容的解决方案：

方案1：手动修复原型链和constructor指向 #

在自定义Error类的构造函数中，调用super()之后手动修正实例的原型链，并确保constructor指向正确的类：

class CustomError extends Error {
  constructor(msg) {
    super(msg);
    // 修复原型链，让实例的原型指向CustomError的原型
    Object.setPrototypeOf(this, CustomError.prototype);
    // 确保constructor属性指向当前类，保证constructor.name正确
    this.constructor = CustomError;
  }

  getName() {
    return this.constructor.name;
  }
}

// 测试代码
const e = new CustomError("There was an error");
console.log(e.constructor.name); // 输出 "CustomError"
console.log(e.getName()); // 输出 "CustomError"

如果你的环境不支持Object.setPrototypeOf，也可以直接使用__proto__（虽然不是标准，但在大多数JS环境中可用）：

this.__proto__ = CustomError.prototype;

方案2：使用Babel插件自动修复 #

可以安装babel-plugin-transform-builtin-extend插件，它专门用来解决Babel转译内置类继承的问题：

1. 安装插件：

npm install --save-dev babel-plugin-transform-builtin-extend

2. 修改.babelrc配置文件，添加插件并指定需要处理的内置类：

{
  "presets": ["es2015", "stage-0"],
  "plugins": [
    ["transform-builtin-extend", {
      "globals": ["Error"]
    }]
  ]
}

配置完成后，你就可以正常编写继承Error的类，不需要手动修改原型链：

class FileSystemException extends Error {
  constructor(msg) { super(msg); }
  getName() { return this.constructor.name; }
}

// 在babel-node中运行会得到正确结果
const e = new FileSystemException("There was an error");
console.log(e.constructor.name); // "FileSystemException"
console.log(e.getName()); // "FileSystemException"

方案3：手动在实例上挂载方法（不推荐） #

如果不想修改原型链或使用插件，也可以在构造函数中将方法直接挂载到实例上，但这种方式会让每个实例都拥有独立的方法副本，不够高效：

class CustomError extends Error {
  constructor(msg) {
    super(msg);
    this.getName = () => CustomError.name;
  }
}

为什么Node.js原生环境没问题？ #

Node.js从v8.x开始逐步支持了ES6标准的内置类继承逻辑，能够正确处理Error这类内置构造函数的继承，所以原生环境下不需要额外处理。但Babel 6的转译逻辑没有跟进这一特性，导致转译后的代码出现原型链问题。

内容的提问来源于stack exchange，提问作者Thiago Loddi