js 클로저 예제 요약_기본 지식

Js 폐쇄
폐쇄 전 알아두셔야 할 사항
1. 기능 범위
(1) Js 언어의 특별한 점은 전역 변수를 함수 내에서 직접 읽을 수 있다는 것입니다

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

php의 경우

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

$n=100;
함수 부모(){
에코 $n;
}
parent();//n이 정의되지 않은 경우 오류를 보고합니다
?>

(2) 함수 내의 지역 변수는 함수 외부에서 읽을 수 없습니다

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

함수 내에서 변수를 선언할 때는 var를 추가해야 합니다. 그렇지 않으면 전역 변수가 선언됩니다

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

함수 부모(){
m=50;
}
부모();
경보(m);//50

//물론 PHP에서는 더욱 그렇습니다.

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

함수 부모(){
global $m;//global, 정의와 할당은 분리되어야 합니다
$m=50;
}
부모();
에코 $m;//50
?>
//글로벌이 없으면 정의되지 않은 오류가 계속 보고됩니다

때때로 함수 내부에 지역 변수를 가져와야 하는 경우, 함수 내부에 하위 함수를 정의하는 등 js 변수 범위의 특성을 활용하는 유연한 방법을 사용해야 합니다. 함수에서 상위 함수는 전역이고 하위 함수는 다음과 같습니다. 함수는 상위 함수의 변수(전체 js 코드에 대한 지역 변수)에 액세스할 수 있습니다

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

부모 내부의 모든 지역 변수는 자식 함수에 표시되지만 자식 함수 내의 지역 변수는 부모 함수에 표시되지 않습니다. 이는 자식 개체가 부모의 모든 변수를 검색하는 방식입니다. 개체는 한 번에 한 수준 위로 올라갑니다. 상위 개체의 모든 변수는 하위 개체에 표시되며 그 반대는 사실이 아닙니다. 위의 아들 함수는 클로저입니다
어떤 학생들은 이런 것일 수도 있습니다

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

함수 부모(){
var m=50;
함수 아들(){
경보(m);
}
}
부모();
son()//보고 함수 son이 정의되지 않았습니다

JavaScript에서 함수에 선언된 함수는 로컬이며 함수 실행이 완료된 후 해제됩니다.
이것과 PHP의 차이점에 주목하세요

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

함수 부모(){
함수 아들(){
$m=50;
에코 $m;
}
}
부모();
son();//50을 출력하면 오류가 보고되지 않습니다
?>

폐업

함수 내부의 함수를 정의하고, 함수의 내부와 외부를 연결하는 브릿지
클로저에는 두 가지 기능이 있습니다:
하나는 앞서 언급한 함수 내부의 변수 읽기입니다.
두 번째는 이러한 변수의 값을 메모리에 저장하여 데이터 공유를 달성하는 것입니다
다음은 폐쇄의 몇 가지 예입니다

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

익명 함수의 실행 결과(즉, 내부 하위 함수의 선언이 전역 변수 cut에 할당됨), i가 메모리에 저장됩니다.
cut()을 실행할 때 메모리에서 직접 값을 가져옵니다. i는 cnt() 함수에 의해서만 호출될 수 있으며 직접 Alert(i)는 작동하지 않습니다
클로저에 매개변수를 전달할 수도 있습니다

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

var cnt=(함수(숫자){
반환 함수(){
경고(숫자);
숫자 ;
}
})(5);
cnt();//5
cnt();//6
cnt();//7
//물론 호출 시 매개변수를 전달할 수도 있습니다
var cnt=(함수(){
var i=0;
반환 함수(num){
숫자 =i;
경고(숫자);
나 ;
}
})();
cnt(1);//1
cnt(2);//3
cnt(3);//5

클로저에 대해 더 잘 이해하기 위해 다음 코드를 살펴보겠습니다
예를 들어 배열을 반환하려고 합니다. 배열에는 5개의 함수가 있습니다. 첫 번째 함수는 0을 나타내고 두 번째 함수는 1을 나타냅니다.
코드를 이렇게 작성하면

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

함수 상자(){
var arr=[];
for(i=0;i arr=function(){return i;}
}
복귀
}
var a=box();
Alert(a);//5개의 함수 본문을 포함하는 배열
경고(a[0]());
경고(a[1]());

팝업 기능 본체
함수(){return i;} }
마지막 i는 4이고 그 다음은 5가 됩니다
For 루프 중지
모든 경우에 5개의 팝업이 나타나는 것을 발견했는데 이는 확실히 우리의 요구 사항을 충족하지 않습니다

해결책 1
내부 기능 자체 즉시 실행

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

함수 상자(){
var arr=[];
for(i=0;i arr=(함수(숫자){return i;})(i);
}
복귀
}
var a=box();
for(var i=0;i 경고(a);
}

하지만 반환된 배열의 요소는 함수 실행의 결과라는 것을 알았지만 우리가 원하는 것은 함수가 코드를 업그레이드해야 한다는 것입니다

해결책 2
폐쇄 구현

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

함수 상자(){
var arr=[];
          for(var i=0;i

arr=(함수(숫자){
반환 함수(){return num;}
                  })(i);

}
복귀 도착;  }

var arr=box();

for(var i=0;i 경고(arr());//0,1,2,3,4

}

키코드

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

arr=(함수(숫자){
           반환 함수(){반환 번호;}
})(i);

i=0일 때
arr[0]=(함수(숫자){반환 함수(){반환 숫자;}})(0);

1시

arr[1]=(함수(숫자){반환 함수(){반환 숫자;}})(1);

위와 같은 휴무 혜택이 있습니다! 매우 간단하고 실용적입니다.