자바 스크립트의 범위를 이해하지 못했습니다.

Question

저는이 코드를 이해하지 못합니다.

$('div').click((function() { 
    var number = 0; 
    return function() { 
     alert(++number); 
    }; 
})()); 

나의 이해는 다음과 같습니다

• 익명 함수를 정의하고 클릭 처리기에 할당됩니다.

• div를 클릭하면이 함수가 호출됩니다.

어떤 함수가하는 일은 다음과 같습니다

• 변수 number = 0

• 돌아 정의 ++number

왜하지 경고 증가 할 때마다의 숫자 나는 클릭 하는가? 클릭 할 때마다 number을 0으로 재설정하면 안됩니까?

Answer 1

여기에 자체 호출 함수이 있는데, 함수를 반환합니다. 끝 부분에 괄호를 조심해 :

function() { 
    alert(++number); 
}; 

이 내부 함수는 변수 number에 액세스 할 수 있습니다

그래서 클릭 핸들러의 콜백은 반환 된 내부 함수입니다

(function() { 
    var number = 0; 
    return function() { 
     alert(++number); 
    }; 
})() 

, 이것은 외부 함수의 범위에있다.

function outerFunction() { 
    var number = 0; 
    return function() { 
     alert(++number); 
    }; 
}; 

var innerFunction = outerFunction(); 

$('div').click(innerFunction); 

Answer 2

이가 "대답은"아니다, 그러나 희망이 문제를 보는 다른 방법을 보여줍니다 다음과 같이

그래서 코드도 작성할 수 있습니다.

---

우선은 자바 스크립트 기능이 단지 객체 따라서 변수에 바인딩 할 수 단지 값 참고. 이와 같이,

$('div').click((function() { 
    var number = 0; 
    return function() { 
     alert(++number); 
    }; 
})()); 

는 그 (이 명확해야 하나 개 이상의 간단한 식 교체

var g = f() 
$('div').click(g); 

을 후

이어서

var f = function() { 
    var number = 0; 
    return function() { 
     alert(++number); 
    }; 
}; 
// $('div').click((f)()); and when removing extra parenthesis -> 
$('div').click(f()); 

같이 다시 간단한 식 교체로 될 수 outer) 함수 f이 먼저 호출되며 결과 (내부 함수) 값인 g이 처리기로 사용됩니다.

변수를 소개하는 것 외에도 위의 대체 코드는 의미 상으로 원래 코드와 같습니다. 것 유사한 의미를 유지

$('div').click((function makeIncrementer() { 
    var number = 0; 
    return function incrementAndAlert() { 
     alert(++number); 
    }; 
})()); 

더 자세한 코드 :

Answer 3

우리는 익명 함수 (추한) 이름을 사용하는 경우는, 코드는 다음과 같이 다시 작성할 수 있습니다

var makeIncrementer = function() { 
    var number = 0; 
    return function() { alert(++number); }; 
}; 

var incrementAndAlert = makeIncrementer(); // function() { alert(++number); } 

$('div').click(incrementAndAlert); 

makeIncrementer가 함수 인 호출 될 때 number 변수를 정의하고 함수를 반환합니다. makeIncrementer은 증가하지 않으며 number 변수를 경고하지 않고 대신에 다른 함수를 반환합니다. 이제 incrementAndAlert이 결합되어

은 $('div') 클릭에 의해 트리거 incrementAndAlert 통화 사이의 상태 makeIncrementer '는 number을 유지 할 수의 number 변수를'캡처 기능

function() { alert(++number); } 

를 반환했습니다.