ES6에서 화살표 기능이 즉시 실행

ES6에서 화살표 기능이 즉시 실행

Node.js 콘솔(4.1.1 및 5.3.0에서 테스트)에서는 작동하지만 브라우저(Chrome에서 테스트)에서는 작동하지 않는 이유는 무엇입니까?

은 이코블록로그기록익는하합니호다만출야해들함고수명를을 하는 익명 함수를 생성하고 .Ok.

() => {
  console.log('Ok');
}()

또한 위의 내용은 Node.js에서 작동하지만 다음과 같이 작동하지 않습니다.

n => {
  console.log('Ok');
}()

이것도 아님:

(n) => {
  console.log('Ok');
}()

매개 변수가 추가되면 실제로 다음과 같은 변수가 발생한다는 것이 이상합니다.SyntaxError바로 시작하는 곳에

이름이 필요 없고 유효한 자바스크립트가 되는 함수 정의 대신 함수 표현으로 만들어야 합니다.

(() => {
  console.log('Ok');
})();

IIF에 해당합니까?

(function() {
   console.log('Ok');
})();

그리고 이것이 Node.js에서는 작동하지만 Chrome에서는 작동하지 않는 가능한 이유는 파서가 이것을 자동 실행 기능으로 해석하기 때문입니다.

function() { console.log('hello'); }();

에서잘는하동에서 잘 합니다.Node.js이것은 함수 표현식이며 Chrome, Firefox 및 대부분의 브라우저는 이렇게 해석합니다.수동으로 호출해야 합니다.

함수 표현식을 기대하도록 파서에게 말하는 가장 널리 받아들여지는 방법은 구문 분석기를 괄호로 묶는 것입니다. 자바스크립트에서 부모는 문을 포함할 수 없기 때문입니다.이 시점에서 파서는 함수 키워드를 만나면 함수 선언이 아닌 함수 표현식으로 구문 분석할 수 있습니다.

매개 변수화된 버전과 관련하여, 이것은 작동할 것입니다.

((n) => {
  console.log('Ok');
})()

이 중 어느 것도 괄호 없이 작동하지 않아야 합니다.

왜요?

왜냐하면 규격에 따르면:

1. 화살표 함수는 Assignment Expression 아래에 나열됩니다.
2. 통화 표현식의 LHS는 회원 표현식, 슈퍼 통화 또는 통화 표현식이어야 합니다.

따라서 통화 표현식의 LHS에는 화살표 함수가 있을 수 없습니다.

---

이것이 어떻게 효과적으로 의미하는지.=>해석되어야 합니다. 즉, 할당 연산자와 동일한 수준에서 작동합니다.=,+=

의미.

• x => {foo}() 되지 않음(x => {foo})()
• 통역사는 그것을 다음과 같이 해석하려고 합니다.x => ({foo}())
• 따라서 여전히 구문 오류입니다.
• 그래서 통역사는 다음과 같이 결정합니다.(잘못된 것이 분명하며 구문 오류가 발생합니다.

---

여기서도 그것에 대해 Babel에 대한 버그가 있었습니다.

이러한 문제가 발생하는 이유는 콘솔 자체가 현재 대상으로 하는 컨텍스트의 글로벌 범위를 에뮬레이트하려고 하기 때문입니다.또한 콘솔에서 작성한 문 및 식에서 반환 값을 캡처하여 결과로 표시합니다.예를 들어 다음과 같습니다.

> 3 + 2
< 5

여기서, 그것은 마치 그것이 표현인 것처럼 실행되지만, 당신은 그것을 진술인 것처럼 썼습니다.일반 스크립트에서는 값이 삭제되지만, 여기서 코드는 내부적으로 깨져야 합니다(전체 문을 함수 컨텍스트로 감싼 것과 같이).return진술), 이것은 당신이 겪고 있는 문제를 포함하여 모든 종류의 이상한 효과를 유발합니다.

이것은 또한 스크립트의 일부 베어 ES6 코드가 잘 작동하지만 Chrome Dev Tools 콘솔에서는 작동하지 않는 이유 중 하나입니다.

노드 및 Chrome 콘솔에서 실행해 보십시오.

{ let a = 3 }

또는 또서는드<script>태그는 잘 작동하지만 콘솔에서 제공됩니다.Uncaught SyntaxError: Unexpected identifier또한 다음과 같은 형태로 소스에 대한 링크를 제공합니다.VMxxx:1이를 클릭하여 평가된 소스를 검사할 수 있으며, 다음과 같이 표시됩니다.

({ let a = 3 })

그렇다면 왜 이런 일을 했을까요?

정답은 결과가 호출자에게 반환되어 콘솔에 표시될 수 있도록 코드를 식으로 변환해야 한다는 것입니다.구문을 괄호로 묶어서 표현식으로 만들 수 있지만 위의 블록이 구문적으로 올바르지 않습니다(표현식에는 블록 선언이 있을 수 없음).

콘솔은 코드에 대해 현명하게 대처함으로써 이러한 에지 케이스를 해결하려고 하지만, 저는 그것이 이 대답의 범위를 벗어난다고 생각합니다.버그를 제출하여 그들이 수정을 고려할 수 있는지 확인할 수 있습니다.

다음은 매우 유사한 예입니다.

https://stackoverflow.com/a/28431346/46588

수 있도록 가장 될 수 있는지 하고 방코식실으행드다수것니입다검는사하음확고을하코를 입니다.SyntaxError소스 링크를 통해 실제 실행 코드가 무엇인지 확인하고 솔루션을 역설계할 수 있습니다.일반적으로 그것은 전략적으로 배치된 한 쌍의 괄호를 의미합니다.

간단히 말해서 콘솔은 글로벌 실행 컨텍스트를 최대한 정확하게 에뮬레이트하려고 하지만 v8 엔진 및 JavaScript 시맨틱과의 상호 작용의 한계로 인해 이를 해결하기가 어렵거나 불가능한 경우가 있습니다.

저는 다음과 같은 질문을 했습니다.

@이 질문이 있다면 다음과 같습니다. #IIF 패턴을 생성하기 위해 함수 선언 주위에 Paran을 사용하여 함수 표현식으로 변환한 다음 호출합니다.이제 화살표 기능 IIIF에서, 우리는 왜 파라가 필요합니까?!화살표 함수는 기본적으로 이미 표현식이 아닌가요?!

카일 심슨의 대답은 이렇습니다.

화살표 함수는 expr이지만, 화살표-IIF를 호출할 최종 부모가 본문의 마지막 토큰뿐만 아니라 전체 함수에 적용되도록 "operator precedence"(sorta)의 주변 부모 b/c가 필요합니다.

x => console.log(x)(4)    // trouble

대

(x => console.log(x))(4)    // working

getify (@getify) 2020년 6월 12일

언급URL : https://stackoverflow.com/questions/34589488/es6-immediately-invoked-arrow-function