> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 클로저와 익명 함수의 차이점은 무엇입니까?

JavaScript 클로저와 익명 함수의 차이점은 무엇입니까?

Barbara Streisand
풀어 주다: 2024-10-29 18:18:45
원래의
793명이 탐색했습니다.

What's the difference between JavaScript closures and anonymous functions?

JavaScript 클로저 및 익명 함수

클로저는 JavaScript에서 중요한 개념으로, 함수가 해당 범위의 변수에 액세스할 수 있도록 해줍니다. 함수가 호출됩니다. 그러나 클로저와 익명 함수를 구별하는 것이 중요합니다.

루프와 setTimeout을 사용하여 카운터 변수의 로깅을 지연시키는 일반적인 예를 생각해 보세요. 클로저를 활용하지 않으면 코드는 최종 값을 여러 번 인쇄합니다.

잘못된 클로저 사용법:

for (var i = 0; i < 10; i++) {
  setTimeout(function() {
    console.log(i); // This incorrectly prints 10 for each iteration
  }, 1000);
}
로그인 후 복사

여기서 문제는 익명 함수가 그렇지 않다는 것입니다. 각 반복마다 i 값을 캡처합니다. 대신 전역 범위에서 i에 대한 참조를 캡처하여 결국 최종 값 10에 도달합니다.

올바른 클로저 사용법:

for (var i = 0; i < 10; i++) {
  (function() {
    var i2 = i;
    setTimeout(function() {
      console.log(i2); // This correctly prints 0 to 9 with delay
    }, 1000);
  })();
}
로그인 후 복사

이 경우 , 익명 함수는 i의 현재 값으로 초기화되는 새 변수 i2를 생성합니다. 그런 다음 내부 익명 함수는 i2의 값을 캡처하고 이를 로깅에 사용하여 원래 반복의 값을 보존합니다.

클로저와 익명 함수 구별:

JavaScript의 모든 함수는 기술적으로 변수를 "닫는" 반면, "클로저"라는 용어는 일반적으로 다음과 같은 함수에 사용됩니다.

  • 외부 범위(예: 로컬이 아니거나 " 자유" 변수)
  • 정의된 범위 외부에서 참조됩니다(즉, 자유 변수 주변에서 "폐쇄"됨)

첫 번째 예에서 익명 함수는 변수 i를 캡처하지 않기 때문에 이러한 기준을 충족하지 않습니다. 두 번째 예에서 익명 함수는 이러한 조건을 충족하므로 클로저로 간주됩니다.

결론:

클로저와 익명 함수의 차이점을 이해하는 것이 중요합니다. JavaScript의 힘을 효과적으로 활용합니다. 클로저는 함수가 포함된 범위와 상호 작용할 수 있도록 하여 캡슐화를 제공하고 변수에 대한 지연된 액세스를 가능하게 합니다. 이는 특히 비동기 작업 및 이벤트 처리에 유용합니다.

위 내용은 JavaScript 클로저와 익명 함수의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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