>  기사  >  웹 프론트엔드  >  JavaScript 클로저의 기본 원칙 이해

JavaScript 클로저의 기본 원칙 이해

WBOY
WBOY원래의
2023-06-15 20:54:04825검색

JavaScript 클로저는 비교적 복잡한 개념입니다. 많은 초보자들이 클로저를 이해하는 데 어려움을 겪지만, 이는 JavaScript를 이해하고 고품질 코드를 작성하는 데 중요한 개념입니다.

폐쇄란 무엇인가요?
클로저는 함수가 범위 외부의 변수에 액세스할 수 있음을 의미합니다. 이러한 변수는 함수 외부에도 여전히 존재합니다. 이는 함수가 정의될 ​​때 함수 내부에 정의된 함수의 매개변수와 변수를 모두 포함하는 자체 범위를 생성하기 때문입니다. 함수가 반환되면 범위는 여전히 존재하며 함수는 범위의 변수에 계속 액세스합니다. 이것이 클로저입니다.

기본 원칙:
함수가 호출되면 해당 범위 체인에는 현재 범위와 모든 상위 범위의 변수가 포함됩니다. 함수에 중첩된 함수가 있는 경우 중첩된 함수의 범위 체인에는 상위 범위와 현재 범위의 변수도 포함됩니다. 이러한 환경에서는 내부 함수가 외부 함수의 변수에 액세스할 수 있지만 외부 함수는 내부 함수의 변수에 액세스할 수 없습니다. 이 메커니즘을 어휘 범위 지정 또는 정적 범위 지정이라고 합니다.

클로저의 응용:
클로저는 JavaScript의 다양한 디자인 패턴과 기술에 널리 사용됩니다. 다음은 클로저 사용에 대한 실제 사용 사례입니다.

1. 프라이빗 변수 가져오기:
JavaScript에는 프라이빗 변수라는 개념이 없기 때문에 클로저를 사용하면 프라이빗 변수를 시뮬레이션할 수 있습니다. 변수가 함수 내부에 정의되어 있는 한, 중첩된 함수가 반환되거나 삭제될 때까지 변수는 해당 함수의 범위에 존재합니다.

예를 들어 다음 코드 예제는 클로저를 사용하여 카운터를 만드는 방법을 보여줍니다.

function createCounter() {
let count = 0;
function counter() {

count++;
console.log(count);

}
return counter;
}
const myCounter = createCounter();
myCounter(); //1
myCounter(); //2
myCounter(); //3

2. 지연 실행을 구현하려면 클로저를 사용하세요. 기능을 수행하기 전에 일정 시간 동안 기다려야 할 경우 클로저를 사용하여 이를 수행할 수 있습니다.

예를 들어, 다음 코드는 클로저를 사용하여 지연된 실행 함수를 구현하는 방법을 보여줍니다.

function DelayFunction() {

let Timer;
return function() {

clearTimeout(timer);
timer = setTimeout(() => {
  console.log('Delayed function executed!');
}, 1000);

}

}
const myDelayedFunction = DelayedFunction() ;
myDelayedFunction(); //1초 기다리면 '지연된 함수가 실행되었습니다!'가 출력됩니다.

클로저가 어려워 보일 수도 있지만 JavaScript 개발자에게는 매우 유용한 개념입니다. 클로저의 기본 원리를 이해하는 것은 JavaScript의 고차 함수와 디자인 패턴을 이해하는 데 중요합니다. 이 기사가 클로저를 더 잘 이해하고 프로그램에 적용하는 데 도움이 되기를 바랍니다.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.