js 클로저 사용에 대한 자세한 설명

이번에는 js 클로저 사용에 대한 자세한 설명을 가져왔습니다. js 클로저 사용 시 주의 사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

클로저는 함수와 해당 함수가 선언된 어휘 환경의 조합입니다.

클로저의 첫 번째 예

function init() {
 var name = 'Mozilla'; // name is a local variable created by init
 function displayName() { // displayName() is the inner function, a closure
 alert(name); // use variable declared in the parent function 
 }
 displayName(); 
}
init();
because inner functions have access to the variables of outer functions, displayName() can access the variable name declared in the parent function, init().

사실 이 밤나무는 내부의 클로저 함수입니다. init(), 외부에서 정의된 변수 이름을 displayName 내에서 호출할 수 있는 이유는 js

내부 함수가 외부 함수에서 변수를 얻을 수 있는 권한을 가지고 있기 때문입니다.

두 번째 예

var data = [
 {'key':0},
 {'key':1},
 {'key':2}
];
function showKey() {
 for(var i=0;i<data.length;i++) {
   setTimeout(function(){
    //console.log(i); //发现i输出了3次3
   //console.log(this); // 发现 this 指向的是 Window
   data[i].key = data[i].key + 10;
   console.log(data[i].key)
   }, 1000);
 }
}
showKey();

위의 예는 10 11 12를 올바르게 출력할 수 있나요?

답은: 아니요, 또한

구문 오류를 보고합니다....

console.log(i)는 3번, 즉 setTimeout 1000밀리초 후에 3번을 출력한다는 것을 발견했습니다. 실행이 닫힙니다. 함수를 래핑하면

for 루프의 실행이 완료되고 i는 고정된 값이므로 기대한 효과를 얻지 못합니다.

console.log(this)는 이것이 Window를 가리키는 것을 발견했습니다. 즉, 함수 내부에 구현된 클로저 함수가

전역 함수로 변환되어 메모리에 저장되었습니다.

그래서 다른 실행 함수를 정의해야 합니다

var data = [
 {'key':0},
 {'key':1},
 {'key':2}
];
function showKey() {
 var f1 = function(n){
  data[i].key = data[i].key + 10;
  console.log(data[i].key)
 }
 for(var i=0;i<data.length;i++) {
   setTimeout(f1(i), 1000);
 }
}
showKey();
// 得到预期的 10 11 12

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 자료:

Vue 사용자 정의 동적 구성 요소 사용에 대한 자세한 설명

js에서 시간 공유 기능을 사용하는 단계에 대한 자세한 설명

위 내용은 js 클로저 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!