code_javascript 기술을 기반으로 한 Javascript 클로저에 대한 간략한 토론

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

function f1(){
var n = 999 ;
nAdd = function(){ n = 1; }
function f2(){
alert(n)
}
return f2; >
여기서 클로저는 f1이며 변수 n과 함수 f2를 닫습니다.

먼저 nAdd를 무시하고 원래 모습을 유지하면서 이 함수를 다시 작성해 보겠습니다.

코드 복사 코드는 다음과 같습니다. function f1(){

var n = 999 ;

var f2 = function(){ 경고(n) };
return f2;
var result = f1()


js의 각 변수는 함수 단위로 캡슐화됩니다. 함수 내부에서 변수를 찾을 수 없으면 함수는 변수가 위치한 이전 단위(컨텍스트)에서 맨 위로 검색합니다. -레벨 창 도메인.
이때 질문이 생깁니다. 검색 프로세스는 함수 참조 위치에서 시작됩니까, 아니면 함수 본문 정의 위치에서 시작됩니까?
위 코드에서 결과의 영역은 window 이지만 실제 출력되는 결과는 f1 내부의 n 값이므로 변수 검색의 시작점은 함수 본문이 정의된 위치라고 결론을 내릴 수 있습니다.

이제 nAdd(첫 번째 코드 부분)를 다시 살펴보세요. 우리가 알고 있듯이 var 키워드 없이 정의된 변수는 기본적으로 윈도우 도메인에 들어가므로 nAdd는 실제로 window.nAdd입니다. 이는 다음 코드와 동일합니다.




코드 복사

코드는 다음과 같습니다. var nAdd function f1(){ var n = 999;

nAdd = function(){ n = 1 }

function f2(){
alert(n); 🎜>}
return function(){ Alert(n) };
}


그런 다음 결과 분석에 따르면 nAdd 실행은 n 값에 영향을 미칩니다. f1.
그래서 다음과 같습니다:

코드 복사

코드는 다음과 같습니다. 함수 f1(){ var n = 999; nAdd = function(){ n = 1; } function f2(){

alert(n); function(){ 경고

}
var result = f1();
nAdd(); 🎜>
이 코드 실행의 최종 출력 결과는 1000입니다.

이 상황을 다시 보세요:




코드 복사


코드는 다음과 같습니다.

function f1(){
var n = 999;
nAdd = function(){ n = 1; }

function f2(){ alert(n); } return function(){ 경고(n) }; f1()() //<--p1 f1; ()() ; //<--p2

실행 프로세스를 간략하게 설명합니다.
위치 p1에서 f1은 익명 클로저 A를 캡슐화하고 함수 A:f2를 반환합니다. A:f2가 실행되고 A:f2는 변수 A:n을 출력하며 결과는 999입니다.
동시에 nAdd는 A의 클로저에 함수로 할당되고, 다음 줄에서는 nAdd를 실행하여 A:n의 값을 1로 설정합니다.
위치 p2에서 f1은 익명 클로저 B를 캡슐화합니다. 수행된 작업은 모두 클로저 B에 대한 것입니다. 그런 다음 B:f2의 출력은 B:n이므로 최종 결과는 여전히 999입니다.
A와 B는 두 개의 독립적인 "패키지"이며 서로 영향을 미치지 않습니다.

함수 호출 부분을 다시 작성합니다.





코드 복사

코드는 다음과 같습니다.


함수 f1(){
var n = 999;
nAdd = function(){ n = 1 }
함수 f2(){
alert(n );
}

return function(){ 경고(n) }; var result = f1() nAdd( ); f1()(); result(); // <--p3

p3 위치가 갑자기 1000을 출력합니다.