즉시 호출된 함수 식

Immediately invoked function expression

즉시 호출되는 함수 표현식(IIFE, "iffy", IPA /ɪff.i/로 발음됨)은 함수 범위를 사용하여 어휘적 범위를 생성하는 프로그래밍 언어 관용어입니다.이는 CommonJS 및 ES [2]모듈과 같은 보다 표준화된 솔루션이 도입되기 전에 모듈러 프로그래밍을 지원하는 방법으로 JavaScript에서 인기를[1] 끌었다.

즉시 호출되는 함수 식을 사용하여 블록 내에서 변수를 호이스트하지 않도록 하고 글로벌 환경을 오염시키지 않도록 보호하며 함수에 정의된 변수에 대한 프라이버시를 유지하면서 메서드에 대한 공개 액세스를 동시에 허용할 수 있습니다.

사용.

즉시 호출되는 함수식은 여러 [3]가지 방법으로 작성될 수 있습니다.일반적인 규칙은 함수 표현식(선택적으로 호출 연산자)을 그룹화 [4]연산자로 괄호 안에 넣어 파서에게 식을 기대하도록 명시적으로 지시하는 것입니다.그렇지 않은 경우 대부분의 경우 파서가 다음을 검출했을 때function키워드에서는 함수식이 아닌 함수 선언([5][6]문)으로 취급됩니다. 

(기능. () { /* ... */ })(); (기능. () { /* ... */ }()); (() => { /* ... */ })(); // ES6 화살표 기능 포함(단, 괄호는 외부에서만 사용 가능

함수식을 강제하는 다른 방법이 있습니다.

!기능. () { /* ... */ }(); ~기능. () { /* ... */ }(); -기능. () { /* ... */ }(); +기능. () { /* ... */ }(); 무효 기능. () { /* ... */ }();

표현이 필요한 컨텍스트에서는 괄호로 둘러싸지 않아도 됩니다.

허락하다 f = 기능. () { /* ... */ }(); 진실의 & & 기능. () { /* ... */ }(); 0, 기능. () { /* ... */ }();

스코프로 변수를 전달하는 방법은 다음과 같습니다.

(기능.(a, b) { /* ... */ })("안녕하세요", "세계");

첫 번째 괄호는 JavaScript의 Automatic 세미콜론 삽입(ASI; 자동 세미콜론 삽입)으로 인해 문제가 발생할 수 있는 경우입니다.이 표현은 앞의 행의 마지막 용어에 대한 호출로 해석됩니다.옵션 세미콜론이 생략된 스타일에서는 세미콜론이 괄호 앞에 배치되며 이를 방어 [7][8]세미콜론이라고 합니다.예를 들어 다음과 같습니다.

a = b + c ;(기능. () {   // 코드 })();

...로 해석되는 것을 피하기 위해c().

예

IIFE 등의 설계 패턴을 이해하기 위한 열쇠는 ES6 이전의 JavaScript에서는 기능 범위(따라서 블록 범위가 결여됨)만이 특징이며,[9] 폐쇄 내부의 참조에 의해 값을 전달한다는 것을 깨닫는 것입니다.ES6 버전의 JavaScript는 새로운 버전을 사용하여 블록 스코핑을 구현하므로 더 이상 그렇지 않습니다.let그리고.const키워드를 지정합니다.[10]

평가 컨텍스트

블록 스코프가 부족하다는 것은 for 루프 내에 정의된 변수(예를 들어)의 정의가 둘러싸인 함수의 맨 위에 "호잉"된다는 것을 의미합니다.외부 함수(반복 포함)에 의해 수정된 변수에 따라 달라지는 함수를 평가하는 것은 어려울 수 있습니다.함수의 [11]정의와 호출 사이의 값을 갱신하면 루프 없이 이를 확인할 수 있습니다. 

허락하다 v, 가치의 취득; v = 1; 가치의 취득 = 기능. () { 돌아가다 v; }; v = 2;  가치의 취득(); // 2

업데이트 시 결과는 명백해 보일 수 있지만v수동에 의해 의도하지 않은 결과가 발생할 수 있습니다.getValue()는 루프 내에서 정의됩니다.

이후 기능은 통과합니다.v인수로서 즉시 호출되어 내부 함수의 실행 [12]컨텍스트를 보존합니다. 

허락하다 v, 가치의 취득; v = 1; 가치의 취득 = (기능. (x) {     돌아가다 기능. () { 돌아가다 x; }; })(v); v = 2;  가치의 취득();  // 1

이는 다음 코드와 동일합니다.

허락하다 v, 가치의 취득; v = 1; 기능. f(x) {     돌아가다 기능. () { 돌아가다 x; }; }; 가치의 취득 = f(v); v = 2;  가치의 취득();  // 1

개인 변수 및 접근자 설정

IIE는 접근 가능한 기능을 위한 개인 메서드를 확립하는 데도 유용하지만 일부 속성은 나중에 사용할 [13]수 있습니다.다음 예는 IIPs에 대한 Alman의 [1]투고에서 나온 것입니다. 

// "counter"는 속성을 가진 객체를 반환하는 함수이며, 이 경우 함수가 됩니다. 허락하다 계산대 = (기능. () {     허락하다 i = 0;      돌아가다 {         얻다: 기능. () {             돌아가다 i;         },         세트: 기능. (값) {             i = 값;         },         증량: 기능. () {             돌아가다 ++i;         }     }; })();  // 이러한 호출은 "counter"에 의해 반환되는 함수 속성에 액세스합니다. 계산대.얻다();       // 0 계산대.세트(3); 계산대.증량(); // 4 계산대.증량(); // 5

접속을 시도하면counter.i호출된 함수에 포함되어 있고, 의 속성이 아니기 때문에 글로벌 환경에서는 정의되지 않습니다.counter마찬가지로, 만약 우리가 접속을 시도한다면i아직 선언하지 않았기 때문에 에러가 발생합니다.i글로벌 환경에서의 대응입니다.

용어.

원래 "자체 실행형 익명 함수"[14]로 알려진 Ben Alman은 나중에 comp.lang.[1][15][16]javascript에 대한 논의가 시작된 직후 사자성어를 의미론적으로 더 정확한 이름으로 IIPE라는 용어를 도입했다.

특히 즉시 호출되는 함수는 본질적으로 익명일 필요는 없으며 ECMAScript 5의 strict 모드에서는arguments.callee이 때문에 원래 용어가 잘못된 명칭이 됩니다.[17]

「 」를 참조해 주세요.

레퍼런스

  1. ^ a b c Alman, Ben (15 November 2010). "Immediately Invoked Function Expressions". Archived from the original on 1 December 2017. Retrieved 18 January 2019.
  2. ^ McGinnis, Tyler (15 January 2019). "JavaScript Modules: From IIFEs to CommonJS to ES6 Modules". ui.dev. Retrieved 18 August 2021.
  3. ^ Lindley, Cody (2013). JavaScript Enlightenment. O'Reilly. p. 61. ISBN 978-1-4493-4288-3.
  4. ^ "Grouping operator". Mozilla Developer Network.
  5. ^ Zakas, Nicholas (2012). Maintainable JavaScript. O'Reilly. p. 44. ISBN 978-1-4493-2768-2.
  6. ^ Axel Rauschmayer. "ExploringJS".
  7. ^ "JavaScript Semicolon Insertion: Everything you need to know". 28 May 2010. Archived from the original on 2 October 2017.
  8. ^ Marohnić, Mislav (7 May 2010). "Semicolons in JavaScript are optional". Archived from the original on 8 August 2017.
  9. ^ Haverbeke, Marijn (2011). Eloquent JavaScript. No Starch Press. pp. 29–30. ISBN 978-1-59327-282-1.
  10. ^ ECMAScript 6: 신기능:개요 및 비교, 블록 범위 변수
  11. ^ Alman, Ben. "simple-iife-example.js". Github. Retrieved 5 February 2013.
  12. ^ Otero, Cesar; Larsen, Rob (2012). Professional jQuery. John Wiley & Sons. p. 31. ISBN 978-1-118-22211-9.
  13. ^ Rettig, Pascal (2012). Professional HTML5 Mobile Game Development. John Wiley & Sons. p. 145. ISBN 978-1-118-30133-3.
  14. ^ Resig, John (2006). Pro JavaScript Techniques. Apress. p. 29. ISBN 978-1-4302-0283-7.
  15. ^ Osmani, Addy (2012). Learning JavaScript Design Patterns. O'Reilly. p. 206. ISBN 978-1-4493-3487-1.
  16. ^ Baagoe, Johannes. "Closing parenthesis in function's definition followed by its call". Retrieved 19 April 2010.
  17. ^ "Strict mode". Mozilla JavaScript Reference. Mozilla Developer Network. Retrieved 4 February 2013.

외부 링크