바벨 트랜스파일링 할 때 질문

Question

변환 전let a &#61; () &#61;> { console.log(this);}변환 후var _this &#61; void 0;var a &#61; function a() { console.log(_this)}위 처럼 바벨에서 트랜스 파일링 할 때 전역 화살표 함수 안에 있는 this의 값이 변경 후 void 0 값으로 바뀌는 것을 알 수 있는데 이해가 안됩니다.화살표 함수도 결국 외부 스코프의 this를 참조 하게 되는거면 전역의 외부는 결국 전역이니 window를 바라봐야 하는것 아닌가요?왜 저렇게 해놨는지 혹시 아시는 분 계신가요?

킁킁탐정 · Accepted Answer

어디서 어떻게 실행했는지를 제가 파악 할 수가 없어서 babeljs 기준으로보면 다음 처럼 컴파일됩니다.즉 use strict에 commonjs 모듈로 할 경우 arrow function이 아니면 this는 유지됩니다.궁금증을 푸는건 좋지만 babeljs 자체를 파고 들면 끝도 없으며 babeljs의 설정에 따라 또 미래에 js의 상황에 따라다른 형태로 컴파일될 수 있습니다.적당한선에서 arrow function과 module에 따라 this가 어떻게 처리되는지만 이해하고 넘어가시길 권해드립니다.https://babeljs.io/repl#?browsers&#61;defaults%2C%20not%20ie%2011%2C%20not%20ie_mob%2011&build&#61;&builtIns&#61;false&corejs&#61;3.21&spec&#61;false&loose&#61;false&code_lz&#61;AUAlBsFMBcQQxAXhACgJRIHwgMYHsA7AZzygDpw8BzFaACwEsi0BuAKDdC5CljgWQAzAK4Ec0BoXQgA3vmKlIFarUbMAvu05gdIsRMLx-0uYRLlKNekzSaO3UHHRaHR5_Z2PjrIA&debug&#61;false&forceAllTransforms&#61;false&modules&#61;commonjs&shippedProposals&#61;false&circleciRepo&#61;&evaluate&#61;false&fileSize&#61;false&timeTravel&#61;false&sourceType&#61;module&lineWrap&#61;true&presets&#61;env%2Creact%2Cstage-2&prettier&#61;false&targets&#61;&version&#61;7.24.3&externalPlugins&#61;&assumptions&#61;%7B%7D추가로 babeljs는 호환을 위해 존재하는 것이지 꼭 이렇게 동작한다고 보증하지 않습니다. 호환되게 코드를 만들어주는점을 명심하세요. babeljs가 만들어주는 코드는 학습을 위한게 아닙니다.

킁킁탐정 · Answer

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

kenu · Answer

화살표 함수(arrow function)는 자신이 정의된 렉시컬 스코프의 this를 참조합니다. 전역 스코프에서 정의된 화살표 함수는 전역 객체(window 또는 global)를 참조하지 않습니다. 대신, 화살표 함수는 자신이 정의된 스코프의 this를 참조하며, 전역 스코프에서 정의된 화살표 함수는 전역 스코프의 this를 참조하지 않습니다. 이는 화살표 함수가 자신이 정의된 스코프의 this를 참조하기 때문입니다.Babel이 화살표 함수를 변환할 때, 화살표 함수의 this를 참조하는 방식을 변경하는 것은 이러한 특성을 유지하기 위함입니다. 화살표 함수가 자신이 정의된 스코프의 this를 참조하도록 하기 위해, Babel은 화살표 함수를 일반 함수로 변환하고, 이 함수의 this를 참조하는 방식을 변경합니다. 이렇게 하면, 화살표 함수가 정의된 스코프의 this를 참조하는 것을 보장할 수 있습니다.예를 들어, Babel은 화살표 함수를 다음과 같이 변환할 수 있습니다:let a = () => { console.log(this); } 이를 다음과 같이 변환할 수 있습니다:var _this = void 0; var a = function a() { console.log(_this); }.bind(this); 여기서 void 0는 undefined를 반환하는 표현식입니다. 이 경우, _this는 화살표 함수가 정의된 스코프의 this를 참조하도록 하기 위해 사용됩니다. .bind(this)는 함수의 this를 현재 스코프의 this로 바인딩하여, 화살표 함수가 정의된 스코프의 this를 참조하도록 합니다.from: https://www.phind.com/search?cache=asp0tx5ybyiayu8in3zeqegs

Clickin · Answer

전역 화살표 함수와 함수 내 화살표 함수를 만들어서 트랜스파일링 결과물을 비교해보세요제가 해볼 수 있는 환경이 아니라 추측이지만 아마 같을겁니다.화살표 함수의 this 는 호출된 당시의 바깥쪽 스코프로 정적 바인딩되는건 아실텐데이게 굳이 global인지 아닌지를 나눠서 트랜스파일링이 다르게 되어야하는 이유가 없어서 그렇지 않을까요그리고 트랜스파일링 시점에서 함수의 스코프가 전역인지 아닌지를 판단하는건 거의 불가능하지 않나요?예를 들어서 require로 import 하면 불러오는 스크립트에서야 전역으로 코딩했어도부르는 측에서는 변수에 고정된 스코프가 되겠죠

킁킁탐정 · Answer

많은 것을 설명해야할지도 모르지만 최대한 단순하게 콕 찝어서 이야기드리면 babeljs의 기본 변환 단위가 &#34;module&#34; 이기 때문입니다. &#34;module&#34;에는 this가 존재하지 않습니다. 그래서 void 0으로 처리합니다. 만약 this를 유지하고 싶으면 &#34;modules&#34; 옵션 끄면 해결됩니다.modules: commonjshttps://babeljs.io/repl#?browsers&#61;defaults%2C%20not%20ie%2011%2C%20not%20ie_mob%2011&build&#61;&builtIns&#61;false&corejs&#61;3.21&spec&#61;false&loose&#61;false&code_lz&#61;DYUwLgBAhhC8EAoCUcB8EDGB7AdgZy1ADpgsBzBMACwEs8kg&debug&#61;false&forceAllTransforms&#61;false&modules&#61;commonjs&shippedProposals&#61;false&circleciRepo&#61;&evaluate&#61;false&fileSize&#61;false&timeTravel&#61;false&sourceType&#61;module&lineWrap&#61;true&presets&#61;env%2Creact%2Cstage-2&prettier&#61;false&targets&#61;&version&#61;7.24.3&externalPlugins&#61;&assumptions&#61;%7B%7Dmodules: offhttps://babeljs.io/repl#?browsers&#61;defaults%2C%20not%20ie%2011%2C%20not%20ie_mob%2011&build&#61;&builtIns&#61;false&corejs&#61;3.21&spec&#61;false&loose&#61;false&code_lz&#61;DYUwLgBAhhC8EAoCUcB8EDGB7AdgZy1ADpgsBzBMACwEs8kg&debug&#61;false&forceAllTransforms&#61;false&modules&#61;false&shippedProposals&#61;false&circleciRepo&#61;&evaluate&#61;false&fileSize&#61;false&timeTravel&#61;false&sourceType&#61;module&lineWrap&#61;true&presets&#61;env%2Creact%2Cstage-2&prettier&#61;false&targets&#61;&version&#61;7.24.3&externalPlugins&#61;&assumptions&#61;%7B%7D어렵게 느껴질 수 있지만 &#34;module&#34;에 관해서 찾아보시길 바랍니다. 이것은 단순하게 script 태그에도 적용된다고 명시되어있습니다.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#global_contextIf the source is loaded as a module (for HTML, this means adding type&#61;&#34;module&#34; to the <script> tag), this is always undefined at the top level.

바벨 트랜스파일링 할 때 질문

5개의 답변

Q&A 목록