JavaScript 클로저 이해: 종합 가이드

JavaScript 클로저 이해: 종합 가이드.

클로저란 무엇입니까?

클로저는 외부 함수의 실행이 완료된 후에도 내부 함수가 외부(인클로징) 함수의 변수 및 매개변수에 액세스할 수 있는 기본 JavaScript 개념입니다. 간단히 말해서 클로저를 사용하면 함수가 다른 범위에서 실행될 때에도 함수가 외부 범위의 변수에 "기억"하고 액세스할 수 있습니다.

클로저의 세 가지 범위

JavaScript의 모든 클로저는 세 가지 범위에 액세스합니다.

• 자신의 범위(함수 내부에 정의된 변수)
• 외부 함수의 변수(상위 함수의 변수)
• 전역 변수(애플리케이션 전체에서 사용 가능한 변수)

어휘 범위 지정: 기초

기본 예를 통해 어휘 범위 지정을 이해해 보겠습니다.

function init() {
  var name = "Mozilla"; // local variable created by init
  function displayName() {
    // inner function
    console.log(name); // uses variable declared in parent function
  }
  displayName();
}
init();

이 예에서는:

• init() 함수는 지역 변수 이름과 내부 함수 displayName()을 생성합니다
• displayName()은 init() 내에만 존재하는 내부 함수입니다
• displayName()에는 자체 지역 변수가 없습니다
• 어휘적 범위 지정으로 인해 이름을 포함하여 상위 범위의 변수에 액세스할 수 있습니다

실제 클로저 이해하기

종료를 보여주기 위해 약간 수정된 버전을 살펴보겠습니다.

function makeFunc() {
  const name = "Mozilla";
  function displayName() {
    console.log(name);
  }
  return displayName;
}

const myFunc = makeFunc();
myFunc();

이해해야 할 핵심 사항:

• 앞의 예와 비슷해 보이지만 결정적인 차이점이 있습니다
• 내부 함수를 즉시 실행하는 대신 반환합니다
• makeFunc()의 실행이 완료되더라도 myFunc는 여전히 name 변수에 액세스할 수 있습니다
• 이는 함수가 어휘 환경에 대한 참조를 유지하기 때문에 가능합니다

실제 예: 함수 팩토리

다음은 클로저의 힘을 보여주는 보다 실용적인 예입니다.

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

const add5 = makeAdder(5);
const add10 = makeAdder(10);

console.log(add5(2));  // outputs 7
console.log(add10(2)); // outputs 12

현재 상황을 분석해 보겠습니다.

• makeAdder는 함수 팩토리입니다 - 맞춤형 함수를 생성합니다
• 생성되는 각 함수는 makeAdder에 전달된 x 값을 기억합니다
• add5와 add10은 모두 클로저입니다.

동일한 함수 정의를 공유합니다
하지만 어휘 환경이 다릅니다
add5 환경에서 x는 5입니다
add10 환경에서 x는 10

클로저가 중요한 이유

클로저는 다음을 허용하므로 강력합니다.

1. 데이터 개인정보 보호: 클로저 내부의 변수는 비공개로 유지되며 외부에서 접근할 수 없습니다
2. 상태 보존: 함수 호출 사이에도 상태를 유지할 수 있습니다
3. 함수 팩토리: 사전 설정된 매개변수로 특수 함수를 생성할 수 있습니다
4. 모듈 패턴: JavaScript 모듈 패턴의 기본입니다

결론

클로저는 최신 JavaScript 패턴, 프레임워크 및 라이브러리에서 광범위하게 사용되므로 JavaScript 개발자에게는 클로저를 이해하는 것이 중요합니다. 이는 코드를 깔끔하고 유지 관리 가능하게 유지하면서 개인 변수를 생성하고 함수형 프로그래밍의 상태를 유지하는 방법을 제공합니다.

기억하세요: 클로저는 단지 다른 함수 내부의 함수가 아닙니다. 클로저는 외부 범위에 있는 변수에 액세스할 수 있고 외부 함수 실행이 완료된 후에도 해당 액세스를 유지하는 함수입니다.

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