Babel/RequireJS + 类型“范围错误:超出最大调用堆栈大小”
Babel/RequireJS + typeof "RangeError: Maximum call stack size exceeded"
我有一个非常基本的JS错误,我很惭愧无法解决它...
我正在用 ES6 和 Babel 进行开发,并且正在做一些实验。请注意,我在 Babel 中使用这些参数:
--presets es2015 --plugins transform-es2015-modules-amd
我有一个简单的模块:
"use strict";
export default class Inspector {
static inspect() {
console.log(this.prototype.myMethod);
console.log(typeof this.prototype.myMethod);
}
}
我像这样使用这个模块:
"use strict";
import Inspector from "inspector";
class Child extends Inspector {
myMethod() {
console.log(`Hello from ${this.name}`);
}
}
Child.inspect();
这里的目标真的很愚蠢:只需检查原型是如何用 ES6 继承填充的。
inspect()
方法的第一个console.log
显示,如预期的那样:
函数 myMethod(( { console.log("你好从" + this.name(; }
继承工作如预期的那样,小时!但有趣的是触发错误的第二个console.log
(console.log(typeof this.prototype.myMethod);
require.js:19 范围错误:超出最大调用堆栈大小(...(
我期待更像"功能"的东西,但是嘿,我想我很天真......
此错误似乎与requirejs模块有关,但我不知道为什么我可以记录函数而不是其类型。
另请注意,我可以在inspect
方法中调用此方法:
static inspect() {
this.prototype.myMethod();
}
这显示"来自未定义的 Hello "(我被期望为"来自孩子的你好",但由于它不是静态方法,所以这是正常的。无论如何,调用已正确执行!
所以,我的问题在这里:为什么我可以记录和调用一个方法,但我不能在其上运行typeof
?
提前感谢!
编辑:您可以在下面看到转译的文件:
检查员.js
define(["exports"], function (exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _typeof(obj) {
return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj === "undefined" ? "undefined" : _typeof(obj);
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var _createClass = (function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
})();
var Inspector = (function () {
function Inspector() {
_classCallCheck(this, Inspector);
}
_createClass(Inspector, null, [{
key: "inspect",
value: function inspect() {
this.prototype.myMethod();
console.log(this.prototype.myMethod);
console.log(_typeof(this.prototype.myMethod));
}
}]);
return Inspector;
})();
exports.default = Inspector;
});
孩子.js
function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj; }
define(["inspector"], function (_inspector) {
"use strict";
var _inspector2 = _interopRequireDefault(_inspector);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var _createClass = (function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
})();
function _possibleConstructorReturn(self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && ((typeof call === "undefined" ? "undefined" : _typeof(call)) === "object" || typeof call === "function") ? call : self;
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
var Child = (function (_Inspector) {
_inherits(Child, _Inspector);
function Child() {
_classCallCheck(this, Child);
return _possibleConstructorReturn(this, Object.getPrototypeOf(Child).apply(this, arguments));
}
_createClass(Child, [{
key: "myMethod",
value: function myMethod() {
console.log("Hello from " + this.name);
}
}]);
return Child;
})(_inspector2.default);
Child.inspect();
});
不幸的是,异常跟踪不是很有帮助:
ea.check @ require.js:19
(匿名函数( @ require.js:23
(匿名函数( @ require.js:8
(匿名函数( @ require.js:24
x @ 要求.js:7
ea.emit @ require.js:24
EA.check @ require.js:20 ea.enable @ require.js:24
ea.init @ require.js:17 J @ require.js:14
h.completeLoad @ require.js:29
h.onScriptLoad @ require.js:30
编辑2:通过查看转译的文件,似乎我的typeof
被替换为 Babel 的方法_typeOf
。而且这个函数是无限循环的...
是巴别塔的错误吗?我错过了编译的任何论据吗?
看起来像一个巴别塔虫,它可能正是这个: https://phabricator.babeljs.io/T6777
对于任何寻找的人来说,Babel 中的错误似乎仍然存在:https://github.com/babel/babel/issues/9127
当用户报告我的代码错误时,我刚刚遇到了它。 一旦我们关闭了他正在使用的 Bable 转译器选项,"超出最大调用堆栈大小"错误就消失了。
更新:此问题已在 2020 年初修复。 看这里: https://github.com/babel/babel/pull/11049
- 是什么让一个“;Uncaught RangeError:超过了最大调用堆栈大小“;错误(Chrome,在其他浏览器中显示
- 超过了async.detect最大调用堆栈大小
- 如何远程检查JavaScript应用程序的函数调用堆栈
- 超过了最大调用堆栈大小,循环无限
- 超过了最大调用堆栈大小.递归标签
- 日志:未捕获的范围错误:超过了最大调用堆栈大小
- 未捕获的范围错误:setTimeout()超过了最大调用堆栈大小
- JavaFX+WebView/Javascript:setTimeOut不起作用调用堆栈来自Java
- JavaScript继承:未捕获的范围错误:超过了最大调用堆栈大小
- 使用$cookies和$stateChangeStart检查sessionID是否超过了最大调用堆栈
- jQuery捕获"RangeError:超过了最大调用堆栈大小“;
- 设置这个.RangeError:超过了最大调用堆栈大小
- 收到“范围错误: 超出最大调用堆栈大小”错误
- 递归 - 测试最大堆栈大小时,调用堆栈无法弹出
- 轮询 ajax 函数超出调用堆栈
- Chrome RangeError:使用jQuery$.map时超过了最大调用堆栈大小
- 要求JS 2.1.9引起“;最大调用堆栈"使用Grunt时出错
- Chrome/jQuery未捕获范围错误:超过了最大调用堆栈大小(函数循环)
- 超过了最大调用堆栈大小-没有明显的递归
- 警告:字体加载过程中出错:轨道上的PDFJS超过了最大调用堆栈大小错误