[javaScript 기초] 함수 표현 식 즉시 호출
5528 단어 WEB 프론트 엔 드
//makeCounter , “ ” i, “ ” 。
function makeCounter() {
// i makeCounter
var i = 0;
return function() {
console.log( ++i );
};
}
// 'counter' 'counter2' 'i'
var counter = makeCounter();
counter(); // logs: 1
counter(); // logs: 2
var counter2 = makeCounter();
counter2(); // logs: 1
counter2(); // logs: 2
i; // ReferenceError: i ( makeCounter )
많은 경우 에 함수 가 여러 개의 '인 스 턴 스' 로 돌아 갈 필요 가 없습니다. 하나의 예 만 필요 하거나 다른 상황 에서 반환 값 도 필요 하지 않 을 수도 있 습 니 다.
문제 의 열쇠
현재 function foo () {} 또는 var foo = function () {} 과 같은 함 수 를 정의 하 였 습 니 다. 그러면 함수 의 식별 자 를 얻 었 습 니 다. foo () 와 같은 () 를 통 해 호출 할 수 있 습 니 다.
// () , foo(), foo
// 'function(){/*...*/}'
var foo = function(){ /* ... */ }
// () , , 。
function(){ /* ... */ }(); // SyntaxError: Unexpected token (
위 에서 보 셨 듯 이 이상 이 생 겼 습 니 다.JS 해석 기 가 전역 작용 역 이나 함수 에서 function 키 워드 를 만 났 을 때, 기본적으로 함수 표현 식 이 아 닌 함수 설명 입 니 다.해석 기 가 표현 식 이 라 고 정확하게 알려 주지 않 으 면 이름 이 없 는 함수 성명 이 라 고 생각 하기 때문에 문법 오류 가 발생 합 니 다. 함수 성명 은 이름 이 필요 하기 때 문 입 니 다.
참고 로 함수, 괄호, 문법 오류
재 미 있 는 것 은 함수 에 이름 을 지정 하고 괄호 를 뒤에 두 면 해석 기 에서 도 문법 적 오 류 를 던 질 수 있다 는 것 이다.괄호 가 표현 식 뒤에 놓 이면 표현 식 은 호출 된 함수 임 을 의미 합 니 다. 괄호 는 성명 뒤에 놓 으 면 앞의 성명 과 완전히 분 리 됩 니 다. 하나의 그룹 연산 자 (우선 순 위 를 제어 하 는 제어 방식) 만 대표 합 니 다.
// , , ,
//
function foo(){ /* ... */ }(); // SyntaxError: Unexpected token )
// ,
//
function foo(){ /* ... */ }( 1 );
// : ,
function foo(){ /* ... */ }
( 1 )
더 알 고 싶 으 면 방문 하 세 요. ECMA-262-3 in detail. Chapter 5. Functions
테이블 함수 달식 즉시 호출 (IIFE)
다행히도 상기 문법 오 류 는 간단하게 복 구 될 수 있다.가장 광범 위 한 방법 은 해석 기 함수 표현 식 이 괄호 로 만 묶 여 있 음 을 알려 주 는 것 입 니 다. 자바 스 크 립 트 에 서 는 괄호 가 성명 을 포함 할 수 없 기 때 문 입 니 다.이 점 에 따라 해석 기 가 function 키 워드 를 만 났 을 때 함수 성명 이 아 닌 표현 식 으로 해석 합 니 다.
// ,
//
(function(){ /* ... */ }()); // Crockford
(function(){ /* ... */ })(); //
// , ,
// , ,
var i = function(){ return 10; }();
true && function(){ /* ...*/ }();
0, function(){ /* ... */ }();
//
// ,
!function(){ /* code */ }();
~function(){ /* code */ }();
-function(){ /* code */ }();
+function(){ /* code */ }();
// , , 'new' ,
//
new function(){ /* code */ }
new function(){ /* code */ }()
괄호 에 대하 여 주의해 야 할 중요 한 점
특히 '잘못된 뜻 제거' 의 괄호 (즉 함수 표현 식 을 포함 한 괄호) 는 필요 하지 않 습 니 다. (해석 기 가 표현 식 이 라 고 생각 했 기 때 문 입 니 다) 할당 에 사용 하 는 것 도 좋 은 생각 입 니 다.
이러한 괄호 는 함수 표현 식 이 즉시 호출 될 수 있 음 을 분명히 암시 하고 이 변 수 는 함수 의 반환 결 과 를 포함 하 며 함수 자체 가 아 닙 니 다.이것 은 일부 사람들 이 당신 의 코드 를 읽 는 번 거 로 움 을 없 앨 수 있 습 니 다. 만약 당신 의 함수 가 오래 설명 되 었 다 면, 아래 로 굴 러 가 야 당신 의 함수 가 호출 되 었 는 지 알 수 있 기 때 문 입 니 다.
일반적으로 명확 한 코드 를 쓰 려 면 기술적 으로 해석 기 가 문법 오류 이상 을 던 지 는 것 을 막 으 려 면 뚜렷 한 코드 를 작성 하 는 것 도 다른 개발 자 들 이 오류 이상 을 당신 에 게 던 지 는 것 을 막 아야 합 니 다.
패키지 로 상태 저장
전달 파 라 메 터 를 통 해 즉시 함 수 를 호출 하고 이름 표 지 를 가 진 함 수 를 호출 하 며 동시에 파 라 메 터 를 전달 합 니 다. 이 두 가지 호출 방식 은 매우 비슷 합 니 다.함수 에 정 의 된 모든 함 수 는 외부 함수 가 전달 하 는 매개 변수 와 외부 함수 의 변 수 를 방문 할 수 있 습 니 다. 즉시 호출 함수 표현 식 은 '잠 금' 값 과 상태 값 을 저장 할 수 있 습 니 다.
클 로 저 explained with JavaScript 를 읽 으 십시오.
다음 예 2 와 예 3 은 원 하 는 대로 실 행 됩 니 다. 함수 표현 식 을 즉시 실행 하 는 것 은 익명 이거 나 이름 이 없 는 것 이 큰 단점 입 니 다.
<a href="###"> </a>
<a href="###"> </a>
<a href="###"> </a>
<a href="###"> </a>
<a href="###"> </a>
<script type="text/javascript">
var elems = document.getElementsByTagName( 'a' );
// 1
for ( var i = 0; i < elems.length; i++ ) {
console.log(i);
elems[ i ].addEventListener( 'click', function(e){
e.preventDefault();
alert( 'I am link #' + i );
}, 'false' );
}
// :
//I am link #5
//I am link #5
//I am link #5
//I am link #5
//I am link #5
// 2
for ( var i = 0; i < elems.length; i++ ) {
(function( lockedInIndex ){
elems[ i ].addEventListener( 'click', function(e){
e.preventDefault();
alert( 'I am link #' + lockedInIndex );
}, 'false' );
})( i );
}
// :
//I am link #0
//I am link #1
//I am link #2
//I am link #3
//I am link #4
// 3
for ( var i = 0; i < elems.length; i++ ) {
elems[ i ].addEventListener( 'click', (function( lockedInIndex ){
return function(e){
e.preventDefault();
alert( 'I am link #' + lockedInIndex );
};
})( i ), 'false' );
}
// :
//I am link #0
//I am link #1
//I am link #2
//I am link #3
//I am link #4
</script>
</code></pre>
<br/>
<br/>
<br/>
<br/>
</div>
</div>
</div>
</div>