javascript - 绕过 Babel 将 ES6 "this"重新映射到 undefined

Question

我正在将代码库迁移到 ES6 类。

我仍在处理一些遗留的 jQuery 模块，这些模块有 init附加到它们的函数，从 html 调用。代码的入口点如下所示:

import * as moduleOne from './module_one/module_one';
import * as moduleTwo from './module_two/module_two';
import * as moduleThree from './module_three/module_three';
import * as moduleFour from "./module_four/module_four";

window.initjQuery = (mod) => {
    eval(mod).init()
}

在 HTML 中:

<script>initjQuery('moduleFour')</script>

所以这有效并且 moduleFour.init() 被正确调用。但我想尽可能避免使用 eval 。问题是 Babel 重新映射了 this至 undefined所以我无法做类似的事情:

var _this = this;

window.initjQuery = function(mod) {
   _this[mod].init();
}

有什么解决办法吗？

Answer 1

那些模块名称只是变量(在模块范围内)，没有任何对象的属性。请注意 this 在模块中是 undefined 就像在严格函数中一样。

因此您需要将这些模块对象放在显式对象上:

import * as moduleOne from './module_one/module_one';
import * as moduleTwo from './module_two/module_two';
import * as moduleThree from './module_three/module_three';
import * as moduleFour from "./module_four/module_four";

const modules = {moduleOne, moduleTwo, moduleThree, moduleFour};
window.initjQuery = (mod) => {
    modules[mod].init()
};