> 웹 프론트엔드 > JS 튜토리얼 > JavaScript의 클로저

JavaScript의 클로저

WBOY
풀어 주다: 2024-09-12 10:30:02
원래의
945명이 탐색했습니다.

Closures in JavaScript

안녕하세요

이번 포스팅에서는 클로저에 대해 알아보겠습니다.

클로저는 상위 함수가 닫힌 후에도 함수가 상위 범위의 변수에 액세스할 수 있도록 허용하므로 JavaScript에서 필수적입니다. 이는 콜백 함수나 상태 유지와 같이 시간이 지남에 따라 데이터를 기억해야 하는 함수에 매우 중요합니다. 여기서 기억해야 할 한 가지 점은 상위 범위의 사용되지 않은 변수가 가비지 수집된다는 것입니다.

정의:
클로저는 주변 상태(어휘 환경)에 대한 참조와 함께 묶인(동봉된) 함수의 조합입니다. 즉, 클로저는 외부 범위에 대한 함수 액세스를 제공합니다. JavaScript에서는 함수가 생성될 때마다 함수 생성 시 클로저가 생성됩니다.

기본적으로 클로저는 다음에 액세스할 수 있습니다.

  • 그들만의 범위
  • 외부 기능의 범위
  • 글로벌 범위

보너스 포인트
어휘 범위: 내부 함수는 외부 범위의 변수에 액세스할 수 있습니다.

예를 들어 이해해 봅시다.

Q> createCounter 함수를 작성합니다. 초기 정수 초기화를 허용해야 합니다. 세 가지 기능이 포함된 객체를 반환해야 합니다.

세 가지 기능은 다음과 같습니다.

increment()는 현재 값을 1만큼 증가시킨 다음 반환합니다.
decrement()는 현재 값을 1만큼 감소시킨 후 반환합니다.
Reset()은 현재 값을 init로 설정한 후 반환합니다.

init = 5 사례 예는 아래 주석 코드를 참조하세요.

솔루션

var createCounter = function(init) {
    const INITIAL_VALUE = init;
    return {
        increment: () => ++init,
        decrement: () => --init,
        reset: () => init=INITIAL_VALUE,
    }
};

/**
 * const counter = createCounter(5)
 * counter.increment(); // 6
 * counter.reset(); // 5
 * counter.decrement(); // 4
 */
로그인 후 복사

설명:

  • 어휘 범위에서 init 변수 캡처
  • createCounter가 실행을 마친 후에도 init에 액세스하고 수정할 수 있는 메서드를 반환합니다.
  • 반환된 메서드를 통해서만 액세스할 수 있는 비공개 영구 상태(init) 생성
  • 각각 자체 캡슐화된 상태를 갖는 여러 개의 독립적인 카운터를 생성할 수 있습니다.

궁금한 점이나 제안 사항이 있으면 언제든지 의견을 남겨주세요.

leetcode에서 가져온 질문입니다. 링크

마지막으로 전역적으로 선언된 변수는 스크립트의 모든 클로저에 액세스할 수 있다는 점을 명심하세요.

이제 클로저에 대해 잘 이해하셨기를 바랍니다. 읽어주셔서 감사합니다

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

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿