JavaScript 시리즈에 대한 심층적 이해 (4) 즉시 호출되는 함수 표현_javascript 기술

서문
자바스크립트를 배우다 보면 익명함수 자체실행을 위한 코드를 자주 접하게 됩니다. 오늘은 주로 자체실행에 대해 이야기하겠습니다.
이에 대해 자세히 알아보기 전에 '자체 실행'이라는 이름에 대해 이야기해 보겠습니다. 이 기사에 나오는 이 기능의 이름은 주로 개인이 어떻게 이해하느냐에 따라 다를 수 있습니다. 자동 실행이라고 하는 사람도 있으니 각자의 이해에 따라 이름을 선택하면 된다. 그런데 '자체 실행'이라고 부르는 사람이 많은데, 저자는 나중에 모두가 부르도록 설득하기 위해 많은 말을 했다. 즉시 호출".함수 표현".
본 기사의 영문 원문 주소: http://benalman.com/news/2010/11/immediately-invoked-function-expression/
자기실행이란?
JavaScript에서는 함수에 대해 선언된 변수와 함수가 함수 내부에만 있을 수 있기 때문에 모든 함수는 실행 컨텍스트를 생성합니다. 이 컨텍스트는 함수를 호출할 때 자유 변수를 생성하는 간단한 방법을 제공합니다. 또는 개인 하위 기능.

코드 복사 코드는 다음과 같습니다.

// 이 함수는 다른 함수를 반환하므로, 그 중 이 함수는 자유 변수 i에 접근할 수 있습니다.
// 말하자면, 이 내부 함수는 실제로 내부 객체를 호출할 수 있는 권한을 가지고 있습니다.
function makeCounter() {
// makeCounter 내부에서만 액세스할 수 있습니다
var i = 0
return function () {
console.log( i); ;
}
// counter와 counter2는 서로 다른 인스턴스이며 각각 자체 범위에 i가 있습니다.
var counter = makeCounter();
counter(); // 로그: 1
counter(); // 로그: 2
var counter2 = makeCounter(); ; // 로그: 1
counter2(); // 로그: 2
alert(i); // 참조 오류: i가 makeCounter 내에 존재하기 때문에 정의되지 않았습니다.


많은 경우 makeCounter의 여러 인스턴스가 필요하지 않으며 어떤 경우에도 반환 값을 표시할 필요가 없습니다.

문제의 핵심
function foo(){} 또는 var foo = function(){}과 같은 함수를 선언할 때 끝에 괄호를 추가하면 자체 실행이 가능합니다. foo( )로 코드를 보세요:

코드를 복사하세요 코드는 다음과 같습니다:

// 아래 첫 번째 것을 원하기 때문에 선언된 함수는 foo()와 같이 그 뒤에 대괄호()를 추가하여 자체적으로 실행될 수 있습니다.

// foo는 단지 표현식 function(에 대한 참조일 뿐이기 때문입니다. ) { /* code */ }
var foo = function(){ /* code */ }
// ...마지막에 괄호를 추가해도 자동으로 실행된다는 뜻인가요? ?
function(){ /* code */ }(); // SyntaxError: Unexpected token (
//


위 코드를 실행하더라도 2번째 코드에서 오류가 발생합니다. 왜냐하면 파서가 전역 함수 또는 함수 내부 함수 키워드를 구문 분석할 때 기본적으로 함수 표현식 대신 함수 선언이 사용되기 때문입니다. 컴파일러에 명시적으로 알리지 않으면 기본적으로 이름이 없는 함수가 사용됩니다. 함수 선언에는 이름이 필요하기 때문에 구문 오류 메시지가 나타납니다.

참고: function, parentheses, SyntaxError(SyntaxError)
흥미롭게도 추가해도 이전 이름도 구문 오류가 발생하지만 이유는 다음과 다릅니다. 위의 경우 표현식 뒤에 괄호()를 추가하면 표현식이 즉시 실행되지만, 명령문 뒤에 괄호()를 추가하면 즉시 실행됩니다. 의미는 완전히 다릅니다. 그의 것은 단지 그룹화 연산자

코드 복사

코드는 다음과 같습니다. >// 다음 함수는 문법적으로는 정확하지만 여전히 문장일 뿐입니다 // 괄호를 추가한 후( ), 그룹화 연산자에 function foo(){ /* code */ }(); 표현식이 포함되어야 하기 때문에 오류가 계속 보고됩니다. // SyntaxError: Unexpected token ) // 괄호() 안에 표현식을 전달하면 예외가 발생하지 않습니다. // 하지만 foo 함수 function foo(){ /* code */ }( 1 )//는 여전히 실행되지 않습니다. 이는 다음 코드와 완전히 동일합니다. 표현식:

function foo(){ /* code */ }

( 1 );
자세한 내용은 ECMA-262-3 5장을 참조하세요.
자체 실행 함수 표현
위 문제를 해결하려면 매우 간단합니다. JavaScript에서는 문장을 괄호() 안에 넣을 수 없기 때문에 중괄호만 사용하면 됩니다. point function 키워드를 구문 분석할 때 파서는 해당 코드를 함수 선언 대신 함수 표현식으로 구문 분석합니다.

코드 복사 코드는 다음과 같습니다.

// 다음 2개의 괄호()는 즉시 실행
(function () { /* code */ } ()); // 이것을 사용하는 것이 좋습니다
(function () { /* code */ })() // 하지만 이것은 또한 사용될 수 있습니다
// 대괄호()와 JS의 &&, XOR, 쉼표 및 기타 연산자는 함수 표현식과 함수 선언을 명확하게 하기 때문에
// 파서가 그 중 하나가 이미 표현식임을 알게 되면, other는 모두 기본적으로 표현식입니다.
// 단, 다음 장의 내용 설명에 주의하세요.
var i = function () { return 10 } (); /* code */ } ();
0, function () { /* code */ } ()// 반환값에 관심이 없거나 어려울까 두렵지 않다면; 읽기
// 단항 연산 기호
를 추가할 수도 있습니다!function () { /* code */ } ()
~function () { /* code */ } () ;
-function () { /* code */ } ();
function () { /* code */ } ()// new 키워드를 사용하는 또 다른 경우가 있습니다. 사용할 수도 있지만 잘 모르겠습니다. 효율성
// http://twitter.com/kuvos/status/18209252090847232
new function () { /* code */ }
new function () { /* code */ } () / / 매개변수를 전달해야 하는 경우 괄호만 추가하면 됩니다. ()


위에 언급된 괄호는 사실 명확성을 위한 것입니다. 괄호는 원래 함수 표현식으로 예상되기 때문에 전혀 필요하지 않습니다. 그러나 우리는 주로 개발자가 쉽게 읽을 수 있도록 하기 위해 괄호를 사용합니다. 자동으로 실행되는 표현식을 변수에 할당할 때 대괄호(()가 표시됩니다. 괄호가 있는지 확인하기 위해 끝까지 스크롤할 필요 없이 빠르게 이해할 수 있습니다.
상태를 저장하려면 클로저를 사용하세요

일반 함수 실행 시 매개변수를 전달하는 것과 마찬가지로 자체 실행됩니다. 함수 표현식은 이러한 방식으로 매개변수를 전달할 수도 있습니다. 클로저를 직접 참조할 수 있기 때문입니다. 이러한 매개변수가 전달되면 자체 실행 함수 표현식은 잠긴 수신 매개변수를 사용하여 상태를 효과적으로 저장할 수 있습니다.

코드 복사 코드는 다음과 같습니다. // 이 코드는 변수이므로 잘못된 코드입니다. 절대 잠겨 있지 않습니다

// 반대로 루프가 실행된 후 클릭할 때만 값을 얻습니다

// 이 때 실제로 값을 얻습니다
// 그러니 상관없습니다 어떤 연결을 클릭하면 최종적으로 표시되는 것은 I am link #10입니다(a 요소가 10개인 경우)
var elems = document.getElementsByTagName('a')
for (var i = 0; i < ; elems.length; i ) {
elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('나는 링크입니다 #' i);
}, 'false');
}
// 자체 실행 함수 표현식 클로저 내부에 있으므로 사용할 수 있습니다.
// i 값은 잠긴 인덱스로 존재하며 루프에서 실행 종료 후 i의 값은 최종적으로 a의 전체 요소 개수(예: 10)가 되지만
// 클로저 내부의lockedInIndex 값은 실행되었으므로 변경되지 않았습니다
// 따라서 연결 시간을 클릭하면 결과가 정확합니다.
var elems = document.getElementsByTagName('a')
for (var i = 0; i < elems.length; i ) {
(function (lockedInIndex) {
elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('나는 링크입니다 #'lockedInIndex);
}, 'false' );
})(i);
}
// 핸들러 함수에서 자체 실행 함수 표현식을 사용하여 다음과 같이 적용할 수도 있습니다. // addEventListener 외부 대신
// 하지만 상대적으로 말하면 위 코드가 더 읽기 쉽습니다.
var elems = document.getElementsByTagName('a')
for (var i = 0; i < elems .length; i ) {
elems[i].addEventListener('click', (function (lockedInIndex) {
return function (e) {
e.preventDefault();
alert(' 나는 링크 #'lockedInIndex)
})(i), 'false');
실제로 위 두 예제의 LockedInIndex 변수는 i로 대체될 수도 있습니다. 외부 i와 동일한 기능을 수행하지 않기 때문에 문제가 되지 않습니다. 이 역시 익명 함수 클로저의 힘입니다. .
자체 실행 익명 함수와 즉시 실행 함수 표현식의 차이점
이번 포스팅에서는 항상 자체 실행 함수라고 했는데, 정확히 말하면 자체 실행 익명 함수입니다(Self -익명 함수 실행), 그러나 원본 영어 텍스트 저자는 항상 즉시 호출 함수 표현이라는 이름의 사용을 옹호해 왔습니다. 또한 저자는 설명하기 위해 여러 가지 예를 제시했습니다.

코드 복사 코드는 다음과 같습니다.

// 자체 실행 함수로 함수가 스스로 실행됩니다. 내부적으로, 재귀적으로
function foo() { foo(); }
// 표시된 이름이 없기 때문에 자체 실행되는 익명 함수입니다.
// 실행하려면args.callee 속성을 사용해야 합니다. 그 자체
var foo = function () {args.callee() }; foo를 다른 것으로 바꾸면 익숙한 자체 실행 익명 함수를 얻게 됩니다.
var foo = function () { foo() }// 어떤 사람들은 이것을 자체 실행 익명 함수라고 부릅니다. (그렇지 않더라도) 자신을 호출하지 않기 때문에 그냥 바로 실행하면 됩니다.
(function () { /* code */ } ());
// 함수 표현식에 레이블 이름을 추가하면 디버깅이 용이해집니다.
// 하지만 이름이 지정되어야 하며 함수는 작동하지 않습니다. 이상 익명입니다
(function foo() { /* code */ } ())
// 즉시 호출 함수 표현식(IIFE)도 자체 실행될 수 있지만 일반적으로 사용되지 않을 수 있습니다
(function () {args.callee(); } ());
(function foo() { foo(); } ())
// 또한 다음 코드는 다음에서 실행됩니다. BlackBerry 5 오류, 명명된 함수 표현식에서 그의 이름이 정의되지 않았기 때문입니다
// 하하, 이상합니다
(function foo() { foo(); } ()); 여기에 있는 몇 가지 예를 통해 모든 사람이 자기 실행이 무엇인지, 즉각 소명이 무엇인지 이해하는 데 도움이 되기를 바랍니다.
참고: Arguments.callee는 ECMAScript 5 엄격 모드에서는 더 이상 사용되지 않으므로 이 모드에서는 사용할 수 없습니다.

최종 내레이션: 모듈 모드
즉시 호출되는 함수 표현식에 대해 이야기할 때 모듈 모드가 익숙하지 않다면 먼저 코드를 살펴보겠습니다. 🎜>

코드 복사


코드는 다음과 같습니다.

// 호출되는 익명 함수 표현식을 생성합니다. 즉시 // 노출하려는 내용이 포함된 변수를 반환합니다. // 반환된 변수는 카운터에 할당되며 외부에 선언된 함수 자체는 아닙니다. var counter = (function () { var i = 0;

return {

get: function () {
return i;
},
set: function (val) {
i = val ; >},
increment: function () {
return i;
}
}
} ())// counter는 다중 개체입니다. 위 코드는 실제로 속성을
counter.get(); // 0
counter.set(3)
counter.increment() // 4
counter; .increment(); // 5
counter.i; // i가 반환된 객체의 속성이 아니기 때문에 정의되지 않았습니다.
i; // 참조 오류: i가 클로저에만 존재하기 때문에


모듈 패턴에 대한 자세한 소개를 보려면 이전 게시물인 JavaScript 시리즈 심층 이해(2): 모듈 패턴 종합 분석을 참조하세요.
더 읽어보기
위의 예를 통해 즉시 호출되는 함수(즉, 자체 실행 함수라고 부르는 함수)의 표현을 이해하는 데 도움이 되기를 바랍니다. 기능 및 모듈 패턴에 대한 자세한 내용을 보려면 아래 웹사이트를 계속 방문하세요.



ECMA-262-3에 대한 자세한 내용은 5장. 기능
- Dmitry A. Soshnikov

함수와 함수 범위
- Mozilla 개발자 네트워크

명명된 함수 표현식

- Juriy “kangax” Zaytsev
1. 모듈 모드 종합 분석 - 벤 체리(삼촌 번역 및 편집)
2. JavaScript로 설명하는 클로저 - Nick Morgan