자바스크립트의 클로저

5030 단어 webdev javascript opensource beginners

여러분, 안녕하세요! 모두 잘 지내고 계시길 바랍니다.

이 블로그에서는 JavaScript에서 혼란스러운 주제 중 하나인 클로저에 대해 글을 쓸 것입니다. 그리고 JavaScript 언어를 배우는 동안 모든 JavaScript 프로그래머가 이 이름을 접했을 것이라고 확신합니다.

클로저를 더 잘 이해하기 위해. 다음은 알아야 할 전제 조건입니다. 그러나 이러한 개념을 모르더라도 걱정하지 마십시오. 위에서 언급한 범위, 블록 범위, 함수 범위, 어휘 범위와 같은 주제에 대해서도 쓰고 있습니다.

범위부터 시작하겠습니다.

범위

범위의 간단한 의미는 JavaScript 프로그램에서 정의된 변수의 액세스 가능성입니다.

예를 들어 이해합시다.

 let a = "JavaScript";
 console.log(a); // JavaScirpt

위의 예에서 쉽게 액세스할 수 있습니다. 괜찮아
그러나 if 블록 내부에 변수를 선언하면.

if (true) {
  let a = 'JavaScript';
}

console.log(a); //  ReferenceError: a is not defined

위의 예는 ReferenceError: a is not defined를 던질 것입니다. 왜냐하면 코드 블록이 해당 블록 내에서만 액세스할 수 있는 변수로 범위를 생성했기 때문입니다.

글로벌 범위

변수가 다른 범위 외부에서 선언되고 해당 변수가 다른 범위에 액세스할 수 있는 경우.

var a = 5;
var b = 5;

function sum() {
  if (true) {
    const sum = a + b;
    console.log(sum); // 10
  }
}
sum();

위의 예에서 두 개의 변수 a, b를 선언하고 값 5를 할당했습니다. 다른 범위 내에서 액세스한 전역 변수이므로 sum = 10을 기록합니다.

블록 범위

ES6가 도입되었을 때 JavaScirpt let 및 const에서 변수를 선언하기 위해 두 개의 새로운 키워드가 도입되었습니다. 둘 다 블록 범위 키워드입니다. 해당 블록 내부에서만 액세스할 수 있습니다.

if (true) {
  const message = 'Hello JavaScript';
  console.log(message); // 'Hello JavaScript'
}
console.log(message); // ReferenceError

첫 번째 로그에서 Hello JavaScript를 인쇄합니다. 해당 블록 내부에 액세스하고 있기 때문에 블록 외부에 액세스하려고 하면 ReferenceError가 발생합니다.

참고:- 코드 블록은 블록 범위를 생성하는 동시에 블록 범위를 생성합니다.

참고: - var는 블록 범위가 아닙니다.

if (true) {
  var message = 'Hello JavaScript';
}
console.log(message); 'Hello JavaScript'

var 키워드의 경우 if {} 코드 블록은 범위를 생성하지 않습니다. 이것이 우리가 if 블록 외부에서 메시지 변수에 액세스하는 이유입니다.

기능 범위

JavaScript 함수는 해당 함수 본문 내에서만 액세스할 수 있는 모든 변수(let, const 및 var)로 범위를 만듭니다.

function sum() {
  var a = 5;
  let b = 5;
  const c = 5;
}
sum();

console.log(a, b, c); // ReferenceError: a is not defined

어휘 범위

예부터 시작하겠습니다.

let myName = 'Pritam';

function one() {
  let age = 15;

  function two() {
    let address = 'Hazaribagh';

    let bio = `My name is ${myName}. and age is ${age}, and Address is ${address}`;

    console.log(bio); // My name is Pritam. and age is 15, and Address is Hazaribagh

  }

  two();
}

one();

위의 예에서

two() 함수는 상위 범위 변수에 액세스할 수 있습니다.
또한 전역 범위의 변수에 액세스할 수 있습니다. 하지만 어떻게? 함수 범위가 외부 함수 범위에 액세스하는 방법입니다. 그것에 대해 알아봅시다.

The answer is Because of Lexical scope / Lexical Environment

어휘 범위의 개념에서 내부 함수는 외부 함수의 범위에 액세스할 수 있습니다.

하지만 어떻게 작동합니까? , 어떻게 기억합니까?

JavaScript에서는 함수가 생성될 때마다 내부 숨겨진 속성으로 인해 어휘 변수를 참조합니다.
[[환경]].

참고: 모든 함수에는 [[Environment]] 속성이 있습니다.

폐쇄

클로저는 It's 어휘 환경의 참조와 함수 번들의 조합입니다.

또는

클로저를 사용하면 어휘 범위 외부에서도 어휘 범위에 액세스할 수 있습니다.

참고: - 함수가 생성될 때마다 클로저가 형성됩니다.

예를 들어 이해합시다.

function outerFunc() {
  let outerVar = 'I am Developer!';
  function innerFunc() {
    console.log(outerVar); // => logs "I am outside!"
  }
  innerFunc();
}

outerFunc();

위의 예에서 어휘 범위로 인해 innerFunc()는 It's 어휘 변수에 액세스할 수 있습니다. 우리는 아주 잘 알고 있습니다.

이제 innerFunc()가 outerFunc() 범위 또는 어휘 범위를 벗어나도록 호출된 프로그램을 변경해 보겠습니다. 내 말은, 다른 기능에서.

function outerFunc() {
  let outerVar = 'I am Developer!';
  function innerFunc() {
    console.log(outerVar); // => logs "I am outside!"
  }
 return innerFunc
}

function newFunc() {
  const myInnerFunc = outerFunc();
  myInnerFunc();
}
 newFunc()

이 경우 innerFunc는 여전히 어휘 범위 변수(outerVar)에 액세스할 수 있으며, 심지어 outerFunc() 범위 밖에서 실행됩니다. 이 경우 폐쇄가 그림에 나타납니다. 폐쇄로 인해 innerFunc는 정의된 위치에서 어휘 범위 변수를 기억합니다. 어쨌든 innerFunc는 범위 밖에서 호출되었습니다.

이것이 클로저에 대한 기본적인 이해에 도움이 되기를 바랍니다.