Babel / RequireJS + typeof“RangeError：超过最大调用堆栈大小” [英] Babel/RequireJS + typeof "RangeError: Maximum call stack size exceeded"
问题描述
我正在使用ES6和Babel开发，我正在做一些实验。
请注意，我在Babel中使用这些参数：
- 预设es2015 --plugins transform-es2015-modules-amd
我有一个简单的模块：
使用严格;
export default class Inspector {
static inspect（）{
console.log（this.prototype.myMethod）;
console.log（typeof this.prototype.myMethod）;
}
}
我使用这个模块：
use strict;
导入检查员的检查员;
class Child extends Inspector {
myMethod（）{
console.log（'Hello from $ {this.name}`）;
}
}
Child.inspect（）;
这里的目标非常愚蠢：只需检查原型是如何填充ES6继承的。 >
从 inspect（）方法显示第一个 console.log 如预期的：
function myMethod（）{
console.log（Hello from+ this.name）;
}
继承人按预期工作，
但有趣的部分是第二个 console.log （ console.log（typeof this.prototype.myMethod）; ）触发错误：
require.js：19 RangeError：超过最大调用堆栈大小（...）
我期待更多的东西像功能，但嘿，我想我很天真...
此错误似乎与requirejs模块相关，但我没有任何线索，为什么我可以记录功能，但不是其类型。
还请请注意，我可以在 inspect 方法中调用此方法：
static inspect（）{
this.prototype.myMethod（）;
}
这将显示Hello from undefined（我预计Hello from Child但是由于它不是静态方法，所以这是正常的，无论如何，调用正确执行！）。
所以，我的问题在这里：为什么我可以记录和调用一个方法但我不能运行 typeof ？
提前感谢！
编辑：您可以在以下浏览文件中看到：
inspector.js / p>
define（[exports]，function（exports）{
use strict;
Object.defineProperty（export，__esModule，{
value：true
}）;
函数_typeof（obj）{
return obj& & typeof Symbol！==undefined&&obj.constructor === Symbol？symbol：typeof obj ===undefined？undefined：_typeof（obj）;
}
函数_classCallCheck（instance，Constructor）{
if（！（instance i nstanceof构造函数））{
throw new TypeError（Can not 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（valuein 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构造函数;
};
}）（）;
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））;
}
}]）;
返回检查器;
}）（）;
exports.default =检查员;
}）;
child.js
function _typeof（obj）{return obj&& typeof Symbol！==undefined&& obj.constructor ===符号？ symbol：typeof obj; }
define（[inspector]，function（_inspector）{
use strict;
var _inspector2 = _interopRequireDefault（_inspector）;
函数_interopRequireDefault（obj）{
return obj&&obj .__ esModule？obj：{
default：obj
};
}
function _classCallCheck（instance，Constructor）{
if（！（instance instanceof Constructor））{
throw new TypeError（Can not 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在描述符中）descriptor.writable = true;
Object.definePro perty（target，descriptor.key，descriptor）;
}
}
返回函数（构造函数，protoProps，staticProps）{
if（protoProps）defineProperties（Constructor.prototype，protoProps）;
if（staticProps）defineProperties（Constructor，staticProps）;
return构造函数;
};
}）（）;
函数_possibleConstructorReturn（self，call）{
if（！self）{
throw new ReferenceError（这还没被初始化 - 没有被调用）;
}
return call&& （（typeof call ===undefined？undefined：_typeof（call））===object|| typeof call ===function）？打电话：自我
}
函数_inherits（subClass，superClass）{
if（typeof superClass！==function&& superClass！== null）{
抛出新的TypeError（超级表达式必须为null或一个函数，而不是+ typeof superClass）;
}
subClass.prototype = Object.create（superClass&& superClass.prototype，{
constructor：{
value：subClass，
枚举：false，
可写：true，
可配置：true
}
}）;
if（superClass）Object.setPrototypeOf？ Object.setPrototypeOf（subClass，superClass）：subClass .__ proto__ = superClass;
}
var Child =（function（_Inspector）{
_inherits（Child，_Inspector）;
函数Child（）{
_classCallCheck（this，Child）;
return _possibleConstructorReturn（this，Object.getPrototypeOf（Child）.apply（this，arguments））;
}
_createClass孩子，[{
键：myMethod，
值：function myMethod（）{
console.log（Hello from+ this.name）;
}
}]）;
return Child;
}）（_ inspector2.default）;
Child.inspect（）;
}）;
异常stracktrace不幸很不方便：
< blockquote>
ea.check @ require.js：19
（匿名函数）@ require.js：23
（匿名函数）@ require.js：8
（匿名函数）@ require.js：24
x @ require.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
EDIT2：通过查看文件夹，似乎我的来自Babel的方法。这个功能无限循环... _typeOf 替换typeof
这是Babel的错误吗？我是否错过了编译的任何参数？
看起来像一个babel bug，可能正是这样： https://phabricator.babeljs.io/T6777
I have a very basic JS error and I'm quite ashamed to not be able to solve it...
I'm developping with ES6 and Babel and I'm making some experiments. Please note I'm using these arguments with Babel:
--presets es2015 --plugins transform-es2015-modules-amd
I have a simple module:
"use strict";
export default class Inspector {
static inspect() {
console.log(this.prototype.myMethod);
console.log(typeof this.prototype.myMethod);
}
}
I use this module like that:
"use strict";
import Inspector from "inspector";
class Child extends Inspector {
myMethod() {
console.log(`Hello from ${this.name}`);
}
}
Child.inspect();
The goal here is really dumb: simply check how the prototype is populated with ES6 inheritance.
The first console.log from inspect() method displays, as expected:
function myMethod() { console.log("Hello from " + this.name); }
Inheritances has worked as expected, hourray!
But the funny part is the second console.log (console.log(typeof this.prototype.myMethod);) which triggers an error:
require.js:19 RangeError: Maximum call stack size exceeded(…)
I was expecting something more like "function", but hey, I suppose I'm quite naive...
This error seems to be related to requirejs modules, but I have no clues why I can log the function but not its type.
Please also note that I can call this method in the inspect method:
static inspect() {
this.prototype.myMethod();
}
This displays "Hello from undefined" (I was expected "Hello from Child" but since it's not a static method, it's normal. Anyway, the call is correctly performed!).
So, my question here: why can I log and call a method but I can't run typeof on it?
Thanks in advance!
EDIT: you can see below the transpiled files:
inspector.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;
});
child.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();
});
Exception stracktrace is not very helpful unfortunately :
ea.check @ require.js:19
(anonymous function) @ require.js:23
(anonymous function) @ require.js:8
(anonymous function) @ require.js:24
x @ require.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
EDIT2: By looking at the transpiled files, it seems that my typeof is replaced with method _typeOf from Babel. And this function is looping infinitely...
Is it a bug with Babel? Did I miss any arguments for the compilation?
Looks like a babel bug, it might be exactly this one: https://phabricator.babeljs.io/T6777
这篇关于Babel / RequireJS + typeof“RangeError：超过最大调用堆栈大小”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
