Question

通过BabelJS运行此代码段时：

class FooError extends Error {
  constructor(message) {
    super(message);
  }
}

let error = new FooError('foo');
console.log(error, error.message, error.stack);

输出

{}

这不是我的期望。运行

error = new Error('foo');
console.log(error, error.message, error.stack);

产生

{} foo Error: foo
    at eval (eval at <anonymous> (https://babeljs.io/scripts/repl.js?t=2015-05-21T16:46:33+00:00:263:11), <anonymous>:24:9)
    at REPL.evaluate (https://babeljs.io/scripts/repl.js?t=2015-05-21T16:46:33+00:00:263:36)
    at REPL.compile (https://babeljs.io/scripts/repl.js?t=2015-05-21T16:46:33+00:00:210:12)
    at Array.onSourceChange (https://babeljs.io/scripts/repl.js?t=2015-05-21T16:46:33+00:00:288:12)
    at u (https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js:28:185)

这正是我想从扩展错误中得到的。

我的目标是将Error扩展到各种子类中，并在bluebird的catch匹配中使用它们。到目前为止，这是悲惨的失败。

为什么子类没有显示消息或堆栈跟踪？

编辑： using Chrome's built-in subclassing（感谢@coder）完美无缺。这并非特定于Babel，因为以下示例（来自@loganfsmyth on Babel's gitter feed）显示：

// Works
new (function(){
  "use strict";
  return class E extends Error { }
}());
// Doesn't
new (function(){
  "use strict";
  function E(message){
    Error.call(this, message);
  };
  E.prototype = Object.create(Error);
  E.prototype.constructor = E;
  return E;
}());

Answer 1

简而言之，使用babel的转换代码扩展仅适用于以特定方式构建的类，并且许多本机内容似乎没有像这样构建。巴贝尔的文档警告说，扩展许多本地课程并不能正常工作。

您可以创建一个缓冲类来创建属性＆＃34;手动＆＃34;，如下所示：

class ErrorClass extends Error {
  constructor (message) {
    super();

    if (Error.hasOwnProperty('captureStackTrace'))
        Error.captureStackTrace(this, this.constructor);
    else
       Object.defineProperty(this, 'stack', {
          value: (new Error()).stack
      });

    Object.defineProperty(this, 'message', {
      value: message
    });
  }

}

然后扩展该类：

class FooError extends ErrorClass {
  constructor(message) {
    super(message);
  }
}

为什么它不像您期望的那样有效？

如果你看一下被翻译的内容，你会发现babel首先会分配一个超级类的副本＆＃39;原型到子类，然后当你调用new SubClass()时，这个函数被调用：

_get(Object.getPrototypeOf(FooError.prototype), "constructor", this).call(this, message)

其中_get是一个注入脚本的辅助函数：

(function get(object, property, receiver) {
  var desc = Object.getOwnPropertyDescriptor(object, property);

  if (desc === undefined) {
    var parent = Object.getPrototypeOf(object);

    if (parent === null) {
      return undefined;
    } else {
      return get(parent, property, receiver);
    }
  } else if ("value" in desc) {
    return desc.value;
  } else {
    var getter = desc.get;

    if (getter === undefined) {
      return undefined;
    }

    return getter.call(receiver);
  }
});

它确实找到了子类的constructor属性描述符＆＃39;原型的原型并尝试使用新的子类实例作为上下文调用其getter（如果存在）或返回其值（if ("value" in desc)），在本例中为Error构造函数本身。它没有从超级调用中为this分配任何内容，因此当新对象具有正确的原型时，它并没有按照您期望的方式构建。基本上，超级调用对新构造的对象没有任何作用，只需创建一个新的Error，它不会被分配给任何东西。

如果我们使用上面定义的ErrorClass，它确实遵循Babel所期望的类结构。

Answer 2

由于ES6到ES5的下层编译，这是一个限制。在TypeScript＆＃39; s explanation中找到更多相关信息。

作为一种解决方法，您可以这样做：

class QueryLimitError extends Error {
  __proto__: QueryLimitError;

  constructor(message) {
    const trueProto = new.target.prototype;
    super(message);
    this.__proto__ = trueProto;
  }
}

在某些情况下，Object.setPrototypeOf(this, FooError.prototype);可能就足够了。

您可以在相应的Github issue和

中找到更多信息

扩展错误没有消息或堆栈跟踪

2 个答案: