JavaScript 클로저 마스터하기: 범위, 캡슐화 및 성능 이해

폐쇄

정의

클로저는 동일한 범위 수준(어휘 범위)에서 선언된 다른 모든 변수 및 함수

에 액세스할 수 있도록 하는 기능입니다.

• 클로저는 동일한 범위 수준(어휘 범위)에서 선언된 다른 모든 변수 및 함수
에 액세스할 수 있도록 하는 기능입니다.
• 다른 함수(외부 함수 및 내부 함수) 내에 함수가 정의되면 클로저가 생성됩니다. 내부 함수는 해당 외부 함수에서 생성된 모든 변수와 함수에 대한 내부 함수에 대한 액세스를 제공하는 클로저를 생성합니다.
• 클로저를 사용하면 외부 함수가 반환된 후에도 내부 함수가 외부 함수에 선언된 변수에 액세스할 수 있습니다.
• 메모리를 적절하게 처리해야 합니다. 클로저는 메모리 누수와 더 나은 메모리 관리로 이어질 수 있습니다.

• JavaScript의 클로저는 비공개 변수를 생성하고 기능을 캡슐화할 수 있도록 하여 Java의 비공개 메소드와 유사한 목적을 제공합니다.

  예

  function outerFunction() {
      let outerVariable = 'I am from outer scope';
  
      function innerFunction() {
          console.log(outerVariable); // Accessing outerVariable from the outer scope
      }
  
      return innerFunction; // Return the inner function
  }
  
  const closureFunction = outerFunction(); // Call outerFunction, which returns innerFunction
  closureFunction(); // Outputs: I am from outer scope
  

  • 위의 예에서는 반환만 되므로 내부 함수만 호출합니다. 비록 우리는 externalVariable에 접근할 수 있습니다.
  • 또 다른 모범 사례를 살펴보겠습니다.

      function handleCount() {
      let count = 0;
  
      return {
          increment: () => {
                  count++;
                  return count;
          },
          decrement: () => {
                  count--;
                  return count;
          },
          getCount: () => {
                  return count;
          },
      };
  }
  
  const counter = handleCount();
  console.log(counter.increment()); // Outputs: 1
  console.log(counter.increment()); // Outputs: 2
  console.log(counter.getCount());  // Outputs: 2
  console.log(counter.decrement()); // Outputs: 1
  console.log(counter.getCount());  // Outputs: 1
  

  • 이제 우리가 handlerCount가 아닌 증가, 감소, getCount를 호출할 때마다 호출된 함수만 실행될 뿐 아니라 해당 범위 외부의 변수에도 액세스할 수 있습니다. 이를 폐쇄라고 합니다.

기억해야 할 핵심 사항

• 정의: 클로저는 어휘 범위 밖에서 함수가 실행되는 경우에도 해당 어휘 범위에 대한 액세스를 유지하는 함수입니다.
• 스코프 체인: 클로저는 함수가 다른 함수 내에 정의될 때 생성됩니다. 내부 함수는 외부 함수의 범위를 포함하는 클로저를 형성합니다.
• 변수에 대한 액세스: 클로저를 사용하면 외부 함수가 반환된 후에도 내부 함수가 외부 함수에 선언된 변수에 액세스할 수 있습니다.
• 개인 변수: 클로저는 종종 개인 변수를 생성하는 데 사용됩니다. 이는 변수가 전역 범위에서 숨겨질 수 있고 클로저를 통해서만 액세스될 수 있음을 의미합니다.
• 메모리 관리: 클로저는 실행에 필요한 변수만 유지하므로 메모리 효율성이 향상될 수 있습니다.
• 성능 고려 사항: 클로저는 강력하지만 적절하게 관리하지 않으면 특히 수명이 긴 객체나 이벤트 리스너에서 메모리 누수로 이어질 수도 있습니다.

사용 사례

• 캡슐화: 개인 데이터나 메소드를 생성합니다.
• 함수 팩토리: 사전 설정된 매개변수로 함수를 생성합니다.
• 콜백: 비동기 프로그래밍용(예: 이벤트 핸들러 또는 setTimeout).
• CSS: 렘과 엠. rem은 루트 요소(html/body)에서 파생되지만 em은 가까운 상위 요소에서 파생됩니다.

일반적인 면접 질문

• 클로저란 무엇이며 어떻게 작동하나요?
• 클로저와 일반 함수의 차이점을 설명해 주실 수 있나요?
• JavaScript에서 클로저의 예를 제공하세요.
• JavaScript의 클로저 사용 사례는 무엇인가요?
• 클로저는 어떻게 메모리 누수로 이어질 수 있으며 이를 방지할 수 있는 방법은 무엇인가요?

위 내용은 JavaScript 클로저 마스터하기: 범위, 캡슐화 및 성능 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!