巴别鸟搞笑的导入

Question

目前我所知的浏览器都没有实现ES6模块接口，但是转译器可以。因此，我使用babel测试了这个简单的例子。

import { getUsefulContents } from "file.js";
getUsefulContents("http://www.example.com", data => {
  doSomethingUseful(data);
  });

我只是想看看它是如何转译这些代码的。出乎我的意料，它产生了以下输出：

"use strict";

var _fileJs = require("file.js");

(0, _fileJs.getUsefulContents)("http://www.example.com", function (data) {
  doSomethingUseful(data);
});

对我来说，最后一行看起来有些神秘 - 特别是 (0, _fileJs.getUsefulContents) 部分，这是怎么回事？那一行中的 (0, ...) 的目的是什么？

- Tero Tolonen

Answer 1

这样调用函数会强制在全局上下文中调用它。

function whoAmI() {
  document.querySelector('pre').innerText += this.name + '\n';
}
window.name = 'window';
var mike = {
  name: 'mike',
  whoAmI: whoAmI
};
mike.whoAmI();
(0, mike.whoAmI)();

<pre></pre>

这个方法之所以有效，是因为在评估(0, filesJs)时，它会遍历括号中的每个语句，就像您可以使用,声明多个变量一样。

var a = 1,
    b = 2,
    ...

由于最后一个表达式是对函数的引用，因此在使用下一组括号进行函数调用时会使用该函数。鉴于表达式已经被评估过了，_filesJs上下文已经丢失。这实际上与执行以下操作相同：

0; // Legal, just pointless
var f = _filesJs.getUsefulContents;
f("http://example.com", ...);

- Mike Cluck

---

@NinaScholz 很好的观点，但我仍然不清楚它被使用的原因。 - Tero Tolonen

@TeroTolonenзҡ„еҺҹеӣ жҳҜдёәдәҶйҳІжӯўеңЁеҮҪж•°еҶ…е°Ҷthisи®ҫзҪ®дёә_filesJsпјҢеӣ дёәжӮЁеңЁзј–еҶҷES6д»Јз Ғж—¶жІЎжңүиҝҷж ·и°ғз”Ёе®ғгҖӮ - Mike Cluck

啊，你是指“胖箭头”语法吗？ - Tero Tolonen

只是一个小括号（嘿）。它的作用是评估括号中的每个语句，并返回最后一个的值（在这种情况下是对函数的引用），该值稍后由第二组括号执行/调用。只是一个微小的措辞问题，否则是一份出色的答案。 - Jan

哦，抱歉，我在想什么呢。 - Tero Tolonen