เหตุใด babel จึงเขียนฟังก์ชันที่นำเข้าใหม่เรียกไปที่ (0, fn) (…)

ให้ไฟล์อินพุตเช่น

import { a } from 'b';

function x () {
  a()
}

บาเบลจะรวบรวมให้

'use strict';

var _b = require('b');

function x() {
  (0, _b.a)();
}

แต่เมื่อคอมไพล์ในโหมดหลวมการเรียกใช้ฟังก์ชันจะถูกส่งออกเป็น _b.a();

ฉันได้ทำการวิจัยเกี่ยวกับตำแหน่งที่เพิ่มตัวดำเนินการลูกน้ำด้วยความหวังว่าจะมีความคิดเห็นอธิบาย รหัสผู้รับผิดชอบสำหรับการเพิ่มมันเป็นที่นี่

(0, _b.a)()ตรวจสอบให้แน่ใจว่าฟังก์ชัน_b.aถูกเรียกใช้โดยthisตั้งค่าเป็นวัตถุส่วนกลาง (หรือถ้าเปิดใช้งานโหมดเข้มงวดเป็นundefined) หากคุณกำลังจะโทร_b.a()โดยตรงแล้ว_b.aเรียกว่ามีการตั้งค่าให้this_b

(0, _b.a)(); เทียบเท่ากับ

0; // Ignore result
var tmp = _b.a;
tmp();

( ,คือตัวดำเนินการลูกน้ำโปรดดูhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator )

ตัวดำเนินการลูกน้ำจะประเมินแต่ละตัวถูกดำเนินการ (จากซ้ายไปขวา) และส่งคืนค่าของตัวถูกดำเนินการสุดท้าย

console.log((1, 2)); // Returns 2 in console
console.log((a = b = 3, c = 4)); // Returns 4 in console

ลองดูตัวอย่าง:

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

a.foo(); // Returns 'false' in console
(0, a.foo)(); // Returns 'true' in console

ตอนนี้ในfooวิธีการthisเท่ากับa(เพราะfooแนบกับa) ดังนั้นถ้าคุณโทรa.foo() โดยตรงมันจะเข้าสู่ระบบfalseคอนโซล

แต่ถ้าคุณถูกโทร(0, a.foo)(). นิพจน์(0, a.foo)จะประเมินแต่ละตัวถูกดำเนินการ (จากซ้ายไปขวา) และส่งคืนค่าของตัวถูกดำเนินการสุดท้าย กล่าวอีกนัยหนึ่ง(0, a.foo)เทียบเท่ากับ

function() {
  console.log(this === window);
}

ตั้งแต่ฟังก์ชั่นนี้ไม่ได้อยู่ติดกับอะไรที่มันเป็นวัตถุที่ทั่วโลกthis windowนั่นเป็นเหตุผลที่มันเข้าสู่ระบบในคอนโซลเมื่อมีการโทรtrue(0, a.foo)()