“자바스크립트 클로저는 프로그래밍의 기본 개념으로, 함수가 주변 범위의 변수에 액세스하고 조작할 수 있게 해줍니다. 이 강력한 기술을 사용하면 데이터 캡슐화, 컨텍스트 보존 및 효율적인 메모리 관리가 가능합니다. 강력하고 확장 가능하며 유지 관리 가능한 애플리케이션을 개발하려면 Javascript 클로저를 이해하는 것이 중요합니다. 이 기사에서는 이 개념의 복잡성을 살펴보고 이 필수 Javascript 개념을 익히기 위한 변수, 함수 및 범위를 탐구할 것입니다.”
이제 Javascript의 클로저가 무엇인지 살펴보겠습니다. 저는 이것을 간단하고 간결한 정의, 기술적이고 상세한 정의, 개념적이고 유사한 정의의 세 가지로 정의하고 싶습니다.
“클로저는 외부 함수가 반환된 경우에도 다른 함수 내부의 함수가 자체 범위와 외부 함수의 범위에 액세스할 수 있는 채널입니다.”
“클로저는 주변 어휘 범위에 대한 참조를 유지하는 자체 포함 함수라고도 할 수 있으며, 함수가 원래 컨텍스트 외부에서 호출되는 경우에도 해당 범위의 변수에 액세스하고 조작할 수 있습니다.” .
“폐업은 추억이 있는 방과 같습니다. 함수가 다른 함수 내부에 생성되면 방이 그 안에 있는 건물의 기능을 상속하는 것처럼 외부 함수의 범위를 상속합니다. 외부 함수가 '닫히는'(반환) 경우에도 내부 함수는 외부 범위를 기억하여 다음을 허용합니다. 변수와 함수에 접근하는 것입니다." 이러한 정의는 JavaScript 클로저의 다양한 측면을 강조합니다.
정의를 강화하거나 주제를 더 잘 이해하려면 이와 같은 마무리를 생각해 보세요. 좋아하는 장난감을 모두 보관하는 장난감 상자 컨테이너가 있다고 상상해 보세요(장난감 상자 컨테이너는 외부 기능입니다). 이제 장난감 컨테이너(외부 기능) 안에 자동차, 인형, 로봇 등 다양한 장난감이 들어 있다고 상상해 보세요. (이것은 변수 또는 기타 기능입니다.) 이 장난감 중에서 로봇이라는 특별한 장난감(내부 기능)이 있습니다. 로봇이 채널을 통해 특별한 능력을 갖고 있다고 상상해 보세요. 장난감 상자가 닫혀 있어도 장난감 상자 안의 다른 모든 장난감을 재생하거나 연결할 수 있습니다. 특별한 채널이나 힘이 폐쇄될 수 있다고 상상해 보세요. 당신이 그것을 얻기를 바랍니다. 클로저를 설명하는 코드의 예를 살펴보겠습니다.
<script>
function details() {
let surName = 'john';
let lastName = 'mercy';
function displayDetails() {
return `hey ${surName} ${lastName} you have been registered`;
}
return displayDetails();
}
console.log(details());
</script>
위 코드에서 displayDetails는 함수 또는 클로저이거나 코드 앞의 그림을 참조하면 더 좋습니다. displayDetails 기능은 클로저의 힘을 사용하여 범위 밖의 변수에 액세스합니다. 여기에 문제가 있습니다. displayDetails는 세부정보 내부에 정의되어 있으며 외부 범위에서 surName 및 lastName에 액세스하고 해당 범위 외부에서도 이 액세스를 유지합니다. 또는 다른 방법으로 세부사항은 surName 및 lastName을 사용하여 범위를 생성하고, displayDetails는 이 범위에 액세스하고, displayDetail은 surName 및 lastName을 사용하여 문자열을 반환하고, 세부정보는 displayDetails의 결과를 반환합니다. console.log(세부사항()); 외부 범위 변수에 액세스하여 displayDetails를 호출합니다.
이 코드의 출력은 다음과 같습니다. 안녕 존 메르시, 당신은 등록되었습니다
결과는 아래와 같습니다
이제 클로저에 대해 이해했으므로 Javascript 코드 작성에서 클로저의 이점을 살펴보겠습니다.
<script>
function details() {
let surName = 'john';
let lastName = 'mercy';
function displayDetails() {
return `hey ${surName} ${lastName} you have been registered`;
}
return displayDetails();
}
console.log(details());
</script>
위 코드에서 Person 함수는 이름과 나이라는 두 개의 인수를 사용합니다. 이 함수는 새로운 사람 개체를 만듭니다. 함수 내에는 privateName과 privateAge라는 두 개의 개인 변수가 선언됩니다. 이러한 변수에는 person 함수에 전달된 값(이름 및 나이)이 할당됩니다. 이러한 변수는 let으로 선언되고 Person 함수 외부에서 직접 액세스할 수 없기 때문에 비공개입니다. 반환 개체도 세 가지 방법으로 생성됩니다. 이 세 가지 방법은 개인 변수에 대한 제어된 액세스를 제공합니다. 따라서 Person 함수는 클로저를 생성하여 반환된 개체가 개인 변수에 액세스할 수 있도록 합니다. 또한 개인 변수는 외부 접근으로부터 숨겨져 데이터 보호를 제공합니다.
<script>
function details() {
let surName = 'john';
let lastName = 'mercy';
function displayDetails() {
return `hey ${surName} ${lastName} you have been registered`;
}
return displayDetails();
}
console.log(details());
</script>
코드에서 발생한 내용은 다음과 같습니다. 다른 함수를 반환하는 createClickCounter 함수를 정의합니다. createClickCounter 내에서 0으로 초기화된 clickCounter 변수를 선언합니다.
반환된 함수는 clickCounter를 증가시키고 clickCounterElement의 텍스트 콘텐츠를 업데이트합니다. 클로저를 생성하고 카운터 변수에 할당하기 위해 createClickCounter()를 호출합니다. addEventListener를 사용하여 버튼의 클릭 이벤트에 카운터 함수를 첨부합니다.
counter 함수는 자체 범위에 액세스할 수 있고, 외부 함수의 범위(createClickCounter())에 액세스할 수 있으며, 함수 호출 간에 clickCounter의 상태를 유지하므로 클로저입니다.
JavaScript 클로저를 사용하면 개발자가 효율적이고 모듈식이며 안전한 코드를 작성할 수 있습니다. 변수, 함수 및 범위를 마스터함으로써 개발자는 클로저의 잠재력을 최대한 활용할 수 있습니다. 클로저는 데이터 캡슐화, 상태 보존 및 개인 변수를 활성화하여 코드 품질과 유지 관리성을 향상시킵니다. 이러한 기본적인 이해를 바탕으로 개발자는 복잡한 Javascript 문제를 자신있게 해결할 수 있습니다. 확장 가능하고 강력하며 효율적인 JavaScript 애플리케이션을 위해서는 클로저를 효과적으로 사용하는 것이 필수적입니다.
위 내용은 JavaScript 클로저 이해: 변수, 함수 및 범위.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
