JS의 클로저 이해하기

• 언어의 복잡한 세부 사항을 이해하려면 숙달이 필요합니다.
• 배열이나 함수를 생성하는 것처럼 생성되지 않습니다.
• LHS 변수 내에 저장된 다른 fn을 반환하는 fn입니다.

const secureBooking = function(){
  let passengerCount = 0;
  return function(){
    passengerCount++;
    console.log(`${passengerCount} passengers`);
  }
}

const booker = secureBooking();

booker();
booker();
booker();

• secureBooking fn은 전역 범위에서 실행됩니다.
• 전역 실행 컨텍스트에 새로운 실행 컨텍스트가 생성됩니다.
• 모든 실행 컨텍스트(EC)에는 모든 변수가 포함된 자체 변수 환경이 있습니다. 이 EC 내부에는 'let PassengerCount = 0'이 정의되어 있습니다. 상위 범위의 모든 변수에 액세스할 수 있습니다.
• 새로운 fn이 반환되어 부커에 저장됩니다.
• 글로벌 EC에는 booker 변수도 포함됩니다.
• 이제 secureBooking()이 EC에서 제거되어 사라집니다. secureBooking EC 환경은 더 이상 활성화되지 않습니다. 하지만 여전히 fn 생성 시 정의된 승객 수 변수에 액세스하고 있습니다.
• 그래도 내부 fn은 외부 fn 내부에 정의된 승객 수 변수에 액세스할 수 있습니다. 이는 폐쇄로 인해 발생합니다.
• 클로저를 사용하면 fn이 fn 또는 해당 EC의 탄생지 주변에 정의된 변수를 기억하게 됩니다.
• booker는 글로벌 범위에 위치한 fn이 아닙니다.
• 이제 booker()를 실행하고 있습니다. 처음으로 자체 변수를 사용하여 호출 스택에 EC를 생성합니다.
• fn은 fn이 생성된 실행 컨텍스트의 변수 환경에 액세스할 수 있습니다. 보안 예약. 따라서 booker는 secureBooking fn의 변수 환경에 정의된 변수에 액세스할 수 있습니다. fn의 탄생지, 즉 정의와 주변 변수 환경의 연결은 fn을 포함하는 secureBooking fn의 EC가 호출 스택에서 튀어나온 후에도 클로저라고 합니다.
• 클로저: fn이 생성된 당시와 장소와 동일하게 fn에 연결된 가변 환경입니다.
• 스코프 체인은 클로저를 통해 보존되며, EC가 없어져도 가변 환경은 어떻게든 엔진에 계속 존재합니다. 따라서 booker fn은 여기에 없는 상위 fn 인수를 포함하여 상위 fn에 대해 닫혀 있다고 말합니다.
• 클로저를 사용하면 fn은 출생지 주변에 정의된 변수와의 연결을 잃지 않습니다.
• 변수가 현재 범위에 없으면 JS는 범위 체인을 조회하기 전에도 클로저를 조사합니다. 전역 변수가 있는 경우에도 해당 클로저에 정의된 변수가 먼저 조회됩니다.
• 클로저가 스코프 체인보다 우선합니다.
• booker()를 처음 실행한 후에는 riderCount 값이 증가하고 콘솔에 로그인된 후 booker가 호출 스택에서 팝됩니다.
• 실행이 다음 줄로 이동하고 새 EC가 생성되지만 클로저 변수는 여전히 남아 있습니다. 기존 값이 증가하고 EC가 튀어나옵니다.
• 이 과정이 세 번째 반복됩니다.

요약

• 정의: 클로저는 EC가 사라진 후에도 fn이 생성된 EC의 폐쇄형 변수 환경입니다.

• 또한 클로저는 상위 fn이 반환된 후에도 fn에 상위 fn의 모든 변수에 대한 액세스를 제공합니다. fn은 외부 범위에 대한 참조를 유지하므로 시간이 지나도 범위 체인이 유지됩니다.

• 클로저를 사용하면 fn이 생성될 당시 존재했던 변수와의 연결이 끊어지지 않습니다. fn이 어디든 가지고 다니는 배낭과 같습니다. 이 백팩에는 fn이 생성된 환경에 존재했던 모든 변수가 들어있습니다.

• 클로저를 수동으로 생성할 필요는 없습니다. 또한 폐쇄형 변수에도 명시적으로 접근할 수 없습니다. 클로저는 유형의 JS 객체가 아닙니다. 즉, 클로저에 접근하여 변수를 가져올 수 없습니다. fn의 내부 속성입니다. 백팩 구경은 "console.dir(booker);"
  [[Scope]]는 이번 fn 통화의 VE에 대해 보여줍니다.

• [[]]는 코드에서 액세스할 수 없는 내부 속성을 의미합니다.

• 클로저를 생성하기 위해 항상 다른 fn에서 fn을 반환할 필요는 없습니다. 아래 예에서 변수 'f'는 전역 범위에 있으므로 fn 내부에도 정의되지 않았습니다. g()가 EC를 마친 후에도 'a' 변수에 액세스할 수 있습니다. 이제 'a'는 'f'의 배낭 안에 들어있습니다.
  

let f;

const g = function(){
  const a = 23;
  f = function() {
    console.log(a*2); // 46
  };
};


const h = function(){
  const b = 777;
  f = function(){
    console.log(b*2); // 1554
  };
};

g();
f();
console.dir(f);

// f fn is reassigned using h fn. Hence, old closure value i.e 'a' will be replaced with new value 'b' which can be verified using console.dir().
h();
f();
console.dir(f);

• setTimeout(callbackFnToBeCalled, Delay);
• 클로저 변수는 범위 체인보다 우선순위가 높습니다.

// Boarding Passengers using Closures
const boardPassengers = function(n, wait){
  const perGroup = n / 3;

  setTimeout(function(){
    console.log(`We are now boarding all ${n} passengers`);
    console.log(`There are 3 groups, each with ${perGroup} passengers`)
  }, wait*1000);

  console.log(`Will start boarding in ${wait} seconds`);
}

boardPassengers(180, 3);

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