Tại sao babel viết lại hàm đã nhập gọi đến (0, fn) (…)?

Đưa ra một tệp đầu vào như

import { a } from 'b';

function x () {
  a()
}

babel sẽ biên dịch nó thành

'use strict';

var _b = require('b');

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

nhưng khi được biên dịch ở chế độ rời, lệnh gọi hàm được xuất ra dưới dạng _b.a();

Tôi đã thực hiện một số nghiên cứu về nơi toán tử dấu phẩy được thêm vào với hy vọng có một nhận xét giải thích nó. Mã chịu trách nhiệm thêm nó ở đây .

(0, _b.a)()đảm bảo rằng hàm _b.ađược gọi với thisđặt thành đối tượng toàn cục (hoặc nếu chế độ nghiêm ngặt được bật, thành undefined). Nếu bạn gọi _b.a()trực tiếp, thì _b.asẽ được gọi với thisđặt thành_b .

(0, _b.a)(); tương đương với

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

( ,là toán tử dấu phẩy, xem https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator ).

Toán tử dấu phẩy đánh giá từng toán hạng của nó (từ trái sang phải) và trả về giá trị của toán hạng cuối cùng.

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

Vì vậy, hãy xem một ví dụ:

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

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

Bây giờ, trong foophương thức, thislà bằng a(bởi vì foođược gắn vào a). Vì vậy, nếu bạn gọia.foo( ) trực tiếp, nó sẽ đăng nhập falsebảng điều khiển.

Nhưng, nếu bạn được gọi (0, a.foo)(). Biểu thức (0, a.foo)sẽ đánh giá từng toán hạng của nó (từ trái sang phải) và trả về giá trị của toán hạng cuối cùng. Nói cách khác, (0, a.foo)tương đương với

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

Vì hàm này không còn được gắn với bất cứ thứ gì, nên nó thislà đối tượng toàn cục window. Đó là lý do tại sao nó đăng nhập truebảng điều khiển khi cuộc gọi (0, a.foo)().