실제 프로젝트에서 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().

사실 이 밤나무는 매우 simple , displayName()은 init() 내부의 클로저 함수인데, 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밀리초 후에 클로저 함수가 발생했습니다. 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

웹사이트 빌더 VuePress를 사용하는 방법

VuePress를 사용하여 웹사이트를 생성하는 방법

위 내용은 실제 프로젝트에서 js 클로저를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!