> 웹 프론트엔드 > JS 튜토리얼 > 클로저 - 자바스크립트

클로저 - 자바스크립트

Susan Sarandon
풀어 주다: 2024-11-11 04:57:02
원래의
785명이 탐색했습니다.

Closures - Javascript

그거 알아요? JavaScript에서는 모든 함수가 자연스럽게 클로저입니다(한 가지 예외만 제외). 실제로 이것이 어떻게 작동하는지 알아보겠습니다.

클로저는 어휘 참조와 함께 묶인 함수입니다. 이것이 공식적인 정의이지만 클로저가 실제로 무엇을 의미합니까? 클로저에 대해 자세히 알아보기 전에 일급 함수를 이해하면 클로저의 작동 방식을 파악하는 데 도움이 되는 기초 지식을 얻을 수 있으므로 유익합니다.

먼저 알아야 할 주요 개념:

1. 일급 함수: 변수에 할당할 수 있고 인수로 전달되고 함수에서 반환될 수 있는 함수
2. 함수 범위: 함수는 자체 범위와 주변(외부) 범위에서 변수에 액세스할 수 있습니다.
3. 실행 컨텍스트: 함수가 호출될 때마다 새로운 실행 컨텍스트가 생성됩니다. 여기에는 변수 환경과 범위 체인이 포함됩니다.

일반적으로 함수 내에서 생성된 변수는 해당 함수로 범위가 지정되며 함수 실행이 완료된 후 즉시 삭제됩니다. 예를 들어, articlesAllowedToAccesscurrentlyAccessed.라는 두 개의 변수를 포함하는 premiumContentAccess
라는 함수를 생각해 보세요.

function premiumContentAccess() {
  let articlesAllowedToAccess = 3;
  let currentlyAccessed = 0;
}

premiumContentAccess();
로그인 후 복사

premiumContentAccess가 실행되면 지역 변수 articlesAllowedToAccesscurrentlyAccessed가 생성됩니다. 함수 실행이 완료되면 이러한 변수는 범위를 벗어나 가비지 수집 대상이 됩니다. 즉, 해당 변수는 사실상 폐기되어 나중에 액세스할 수 없습니다.

premiumContentAccess를 실행한 후에도 이러한 변수에 대한 액세스를 유지할 수 있나요? 이제 마무리입니다.

폐쇄란 무엇인가요?

클로저는 주변(외부) 변수에 액세스할 수 있는 함수가 반환될 때 형성됩니다. 이러한 변수 참조는 함수와 함께 번들로 제공되므로 지속될 수 있습니다.

function premiumContentAccess() {
  let articlesAllowedToAccess = 3;
  let currentlyAccessed = 0;  

  function accessArticle() {
    if (currentlyAccessed >= articlesAllowedToAccess) {
      return 'Premium Article Access Reached';
    }
    currentlyAccessed++;
    return 'Article accessed';
  }
  return accessArticle;
}

let accessArticle = premiumContentAccess();

console.log(accessArticle()); // Outputs: Article accessed
console.log(accessArticle()); // Outputs: Article accessed
console.log(accessArticle()); // Outputs: Article accessed
console.log(accessArticle()); // Outputs: Premium Article Access Reached
로그인 후 복사

예제 분석

1. 외부 함수: premiumContentAccess()articlesAllowedToAccesscurrentlyAccessed
변수를 정의하는 외부 함수입니다. 2. 내부 함수: accessArticle은 외부 함수에 정의된 어휘 범위에서 변수에 액세스하는 내부 함수입니다.
3. 클로저: premiumContentAccess()가 호출되면 articlesAllowedToAccesscurrentlyAccessed 변수에 대한 액세스를 유지하는 accessArticle 함수를 반환합니다. 외부 함수 실행이 완료된 후에도 마찬가지입니다.
4. 상태 유지: 클로저를 사용하면 accessArticle이 액세스된 기사 수에 관한 자체 상태를 유지할 수 있습니다. accessArticle을 호출할 때마다 폐쇄로 인해 보존되는 현재 액세스됨이 수정됩니다.

모든 기능은 폐쇄형입니다:

처음에 언급했듯이 모든 기능은 자연스럽게 닫힙니다.

즉, 숨겨진 [[Environment]] 속성을 ​​통해 생성 컨텍스트에 대한 참조를 자동으로 유지하여 코드가 외부 변수에 액세스할 수 있도록 합니다.

예외: 새 Function 생성자를 사용하여 생성된 함수는 [[Environment]]를 생성 컨텍스트 대신 전역 컨텍스트로 설정합니다.


읽어주셔서 감사합니다! 이 블로그가 유익하고 흥미로웠기를 바랍니다. 부정확한 내용을 발견하거나 의견이 있으면 언제든지 알려주시기 바랍니다.

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

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