[javaScript 기초] 함수 표현 식 즉시 호출

5528 단어 WEB 프론트 엔 드
javascript 에서 모든 함수 가 호출 될 때 새로운 실행 컨 텍스트 를 만 듭 니 다.한 함수 에서 정 의 된 변수 와 함 수 는 안에서 만 접근 할 수 있 기 때문에 밖 에 서 는 안 됩 니 다. 문맥 은 사유 성 을 만 드 는 쉬 운 방법 을 제공 합 니 다.
//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>

좋은 웹페이지 즐겨찾기