JavaScript의 단어 환경 및 클로즈업

최초 발표는 2022년 3월 9일https://rivea0.github.io/blog
worst of times and the age of foolishness라고 느낄 때 미래는 더욱 어두운 시기가 있을 것이고, 사물이 더 깊은 표면에서 어떻게 작동하는지 이해하기를 갈망할 수도 있다.
JavaScript 표면 아래에 있는 것 중 하나는 어휘 환경의 개념이다.만약 당신이 클립에 익숙하다면, 그것은 당신이 진정으로 발생한 일을 내화하는 데 도움을 줄 수 있다.
우리는 어휘 환경을 모든 함수, 코드 블록, 심지어 전체 스크립트 자체가 가지고 있는 대상으로 볼 수 있다.그것은 국부 변수와 그 값을 포함할 뿐만 아니라 외부 어휘 환경도 인용한다.
변수를 만들 때 다음과 같이 하십시오.

let book = 'Harry Potter and the Prisoner of Azkaban';

book를 어휘 환경의 한 속성으로 보고 그 값은'Harry Potter and the Prisoner of Azkaban'이다.현재 전역 어휘 환경에 있기 때문에 외부 인용은 null 이다.아마도 다른 사고방식은 전체적인 어휘 환경은 전체 스크립트의 환경이고 자신을 제외하고는 외부의 참고가 없다는 것이다.
변수와 성명된 함수에 대해 전역 어휘 환경의 행위는 다르다.이게 무슨 뜻인지 이해해 봅시다.
전역 어휘 환경에는 모든 변수가 가득 차 있지만, 처음에는 이 변수들이 '초기화되지 않은 것' 이었다. 이것은 엔진이 그것들을 알고 있지만, 그것들을 설명하기 전에 인용할 수 없다는 것을 의미한다.현재 스크립트인 경우

let book; // (1)
book = 'Harry Potter and the Prisoner of Azkaban'; // (2)
book = 'Harry Potter and the Goblet of Fire'; // (3)

실행을 시작할 때 발생하는 경우 (전역) 문법 환경은 변수 book 를 알고 있지만 초기화되지 않습니다.
온라인(1),book현재undefined입니다.
(2) 줄에서 book 값이 분배되었다'Harry Potter and the Prisoner of Azkaban'.
(3)에서 book의 값이 'Harry Potter and the Goblet of Fire'로 변경되었습니다.
그러나 우리는 함수 성명의 상황이 다르다고 말했다.JavaScript의 향상된 측면도 보여줍니다.어디 보자.
함수가 성명되었을 때, 사용할 수 있도록 즉시 초기화됩니다.이것이 바로 우리가 함수를 사용한 후에 그것을 성명하는지의 여부가 중요하지 않다는 이유이다. 이것이 바로 비슷한 것이 왜 작동할 수 있는지이다.

console.log(add(30, 3)); // 33

function add(num, num2) {
  return num + num2;
}

JavaScript가 함수를 "올림"했다고 말할 때 실제로 발생하는 것은 다음과 같습니다. 구문 환경을 만들 때 선언된 함수가 즉시 초기화됩니다.하지만 이제 살펴보자.

let broomstick = 'Firebolt';

function summonItem(spell) {
  return `${spell} ${broomstick}!`;
}

console.log(summonItem('Accio')); // Accio Firebolt!

상기 코드가 실행되기 시작했을 때 문법 환경은 broomstick과 summonItem를 동시에 알고 있다.단, broomstick는 이 단계에서 초기화되지 않았고, summonItem는 이미 초기화되어 사용할 준비가 되어 있다.
어휘 환경을 시각화하려면 다음과 같은 속성을 가진 객체로 간주합니다.

{
  broomstick: <uninitialized>,
  summonItem: function
}

물론 그것outer은 null을 인용했다. 왜냐하면 이것은 전 세계 어휘 환경이기 때문이다.
함수가 실행되기 시작하면 새로운 어휘 환경을 만들 것입니다.따라서 우리가 summonItemconsole.log 내부를 호출할 때 이 호출된 어휘 환경은 값spell이 있는 'Accio'만 저장한다.그 밖에 outer 인용 전역 어휘 환경 자체, 저장broomstick과 summonItem, 그리고 자신outer 인용null도 있다.우리의 함수 호출(summonItem('Accio')의 어휘 환경, 즉 내부 어휘 환경, 외부 어휘 환경, 즉 전역 어휘 환경을 인용합니다.즉 spell는 로컬에서 찾았지만 broomstick에 도착하려면 outer 인용에 따라 그곳에서 찾았다.
그래서 다음과 같이 말할 수 있다.

When the code wants to access a variable – the inner Lexical Environment is searched first, then the outer one, then the more outer one and so on until the global one.

이제 숨을 돌릴 때가 되었다.
처음에는 많을 수도 있지만 그건 공부예요.💁🏻.
이번에는 이것을 생각해 보자.

function powersOfTwo() {
  let start = 2;
  let count = 0;
  return function() {
    return start ** count++;
  }
}

let twoToThePower = powersOfTwo();

console.log(twoToThePower()); // 1 (2 ** 0)
console.log(twoToThePower()); // 2 (2 ** 1)
console.log(twoToThePower()); // 4 (2 ** 2)
console.log(twoToThePower()); // 8 (2 ** 3)
console.log(twoToThePower()); // 16 (2 ** 4)
console.log(twoToThePower()); // 32 (2 ** 5)

powersOfTwo를 호출할 때, 문법 환경을 만들 것입니다.현재 start와 count, 그리고 outer는 전 세계 어휘 환경powersOfTwo과 twoToThePower, 그리고 자신의outer 인용null을 인용하고 있다.
우리가 twoToThePower 내부에서 console.log를 호출했을 때 발생한 것은 새로운 어휘 환경이 만들어졌다는 것을 알아차렸다는 것이다.start와 count는 이 지역 어휘 환경에 없기 때문에 outer 인용powersOfTwo의 어휘 환경을 따른다.업데이트count를 하면 powersOfTwo의 문법 환경에서 업데이트됩니다.다른 표현은 다음과 같습니다.

A variable is updated in the Lexical Environment where it lives.

마찬가지로 start와 count는 powersOfTwo의 어휘 환경에서 생활한다.우리가 업데이트할 때 count, 그것은 우리가 귀속된 반환 함수 twoToThePower 의 문법 환경이 아니라 그곳에서 업데이트됩니다.twoToThePower의 첫 번째 호출에서 start는 2이고 count는 0이다.두 번째 호출에서 start는 여전히 2였지만 count는 업데이트되어 현재 1입니다.그리고 우리가 powersOfTwo를 호출하기만 하면 그 소재의 어휘 환경twoToThePower에서 계속 업데이트될 것이다.
따라서 twoToThePower는 인용된 어휘 환경에서의 변수를 방문하고 수정하는'능력'을 가진다.
이것이 바로 패킷을 닫는 의미입니다. outer 작용역에 접근할 수 있는 함수입니다.
계시가 왔습니다: 그럼 모든 함수가 자바스크립트의 클립이 아닙니까?
정답은 mostly yes, with an exception입니다.
만약 outer 예시를 기억한다면, summonItem 범위에서 접근 변수 (broomstick) 를 찾았기 때문에, 정의에 따라, 우리는 그것이 이론적으로 폐쇄적이라고 말할 수 있다.그러나 우리가 자신을 헷갈리지 않는 것이 좋을 수도 있다. 왜냐하면 당신이 클립을 찾을 때 가장 기본적인 예는 정신적으로 outer 와 비슷하기 때문이다.그러나 이것은 좋은 일이다. 왜냐하면 우리의 목표는 사물이 어떻게 표면적으로 작동하는지 보는 것이다.물론 이것은 추상적인 표면이지만 깊이 연구할 만하다.

도구책

javascript.info는 내가 이 글을 쓸 때의 주요 자원으로 인용문은 그곳에서 얻은 것이다.그것은 또한 좋은 시각적 효과가 있어 어휘 환경을 더욱 잘 이해하는 데 도움을 줄 수 있다.

MDN article for closures . 왜냐하면 MDN이 없는 자원 부분은 무엇입니까?

쾌속 촬영.