(0,fn)()的執行原理

今天在看babel插件的源碼的時候，發現Babel的不少插件都是這樣是寫的。

var _default = (0, _helperPluginUtils().declare)((api, options) => {
    
})
複製代碼

咦，這個(0,_helperPluginUtils().declare)是什麼意思呢？ 怎麼用呢？ 本着求知的精神，在網上查了下。

問題

首先咱們先來思考一個問題

const a = {
    foo: function () {
        console.log(this === window);
    }
};
const  foo1 = a.foo;

a.foo();

foo1();

(0, a.foo)();

複製代碼

給你三秒鐘時間，思考下a.foo()，foo1()和(0,a.foo)() 分別會輸出什麼？

1

2

3

揭曉答案

a.foo()，foo1()和(0,a.foo)() 分別會輸出false，true和true。

a.foo()咱們都能理解，a對象去調用foo的方法，因此this指向a。

foo1() 由於下面的代碼不在嚴格模式下，且 this 的值不是由該調用設置的，因此 this 的值默認指向全局對象。

逗號操做符

(0,a.foo)() 的this的爲何是window呢？這是由於逗號操做符的運行規則。

逗號操做符 對它的每一個操做數求值（從左到右），並返回最後一個操做數的值。

這句話怎麼理解呢？看下面的代碼

console.log((1, 2));   // 返回最後一個操做數的值 => 2
console.log((a = b = 3, c = 4));   // 返回最後一個操做數的值 => 4
複製代碼

因此 (0, a.foo)()， 其實等於

0;
var temp = a.foo;
temp();

複製代碼

由於逗號操做符的運行規則，對它的每一個操做數求值（從左到右），並返回最後一個操做數的值。(0, a.foo)返回了_foo,而後_foo在全局環境裏面調用，因此this指向window

爲何要這樣作呢？

這樣作是爲了將a.foo的this設置爲window（在嚴格模式下爲undefined）

若是直接調用a.foo的話a.foo裏面的this將指向a。

參考資料
逗號操做符

Why does babel rewrite imported function call to (0, fn)(…)