바벨이 가져온 함수 호출을 (0, fn) (…)으로 다시 작성하는 이유는 무엇입니까?


100

다음과 같은 입력 파일이 주어지면

import { a } from 'b';

function x () {
  a()
}

바벨은 그것을 컴파일합니다

'use strict';

var _b = require('b');

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

그러나 느슨한 모드에서 컴파일되면 함수 호출은 다음과 같이 출력됩니다. _b.a();

나는 그것을 설명하는 주석이 있기를 희망하면서 쉼표 연산자가 추가되는 위치에 대해 조사했습니다. 추가를 담당하는 코드는 여기에 있습니다 .


4
그들은 _b.a.call()의도를 분명히하기 위해 해야했습니다 .
Bergi

@Bergi 나는 그들이 (0,)을 사용하는 이유는 트랜스 파일 된 코드의 공간을 절약하기 위해서라고 확신합니다.
Andy


답변:


138

(0, _b.a)()함수 _b.athis전역 객체 로 설정된 상태에서 호출되도록 합니다 (또는 엄격 모드가 활성화 된 경우로 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 참조 ).


3
링크 주셔서 감사합니다. 이것을 여러 번 통과했고 마침내 무슨 일이 일어나고 있는지 알아 내기로 결정했습니다.
theflowersoftime 2016 년

@RobW var _a = (0, _b.a)파일 맨 위에 추가 한 다음 호출 _a하면 많은 경우에 더 많은 공간을 절약 할 수 있다고 생각합니다. 그렇게하지 않은 아이디어가 있습니까?
Andy

1
@Andy 귀하의 제안에는 부작용이있을 수 있습니다 _b.a( 예 : (동적) 게터 일 때 ).
Rob W

@RobW 내가 알기 때문에 함수를 호출해야 할 때까지 잠재적 인 부작용을 피하는 것이 아이디어라고 말하고 있습니다.
Andy

모듈은 항상 엄격한 코드이므로 항상 this === undefined
그렇고

22

쉼표 연산자는 각 피연산자를 평가하고 (왼쪽에서 오른쪽으로) 마지막 피연산자의 값을 반환합니다.

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)()입니다.


console.log(this === window);개발 콘솔에서 실행하면 더 이상 인쇄를 기록하지 않습니다.
kushdilip

2
이것은 내 마음을 불었다. 여기서 핵심은 쉼표 연산자가 "마지막 피연산자의 값을 반환"한다는 것입니다. 여기서 "값"은 포함 된 부모가없는 함수 자체입니다. 따라서 foo는 더 이상 a 내부에 존재하지 않습니다.
martinp999 19
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.