⚡️⛓JavaScript 시각화:범위(체인)

범위 체인의 시간이 왔습니다.🕺🏼 이 문장에서, 나는 네가 상하문을 집행하는 기본 지식을 알고 있다고 가정한다. 그러나 나는 곧 이 점에 관한 문장을 한 편 쓸 것이다😃
다음 코드를 살펴보겠습니다.

const name = "Lydia"
const age = 21
const city = "San Francisco"


function getPersonInfo() {
  const name = "Sarah"
  const age = 22

  return `${name} is ${age} and lives in ${city}`
}

console.log(getPersonInfo())

우리는 getPersonInfo 함수를 호출했는데 이 함수는 name, age와 city 변수의 값을 포함하는 문자열을 되돌려줍니다.Sarah is 22 and lives in San Francisco . 단, getPersonInfo 함수는 city라는 변수를 포함하지 않습니다🤨? 그것은 어떻게 city의 가치를 알았습니까?
우선 서로 다른 상하문에 메모리 공간을 설정합니다.기본 전역 상하문 (window 은 브라우저에서, global 노드에서), 호출된 getPersonInfo 함수의 로컬 상하문이 있습니다.각 컨텍스트에는 범위 체인도 있습니다.getPersonInfo 함수에 대해 작용역 체인은 이렇게 보입니다(걱정 마세요. 의미가 있는 것은 아닙니다).

역할 도메인 체인은 기본적으로 객체에 대한 참조 체인으로, 이 실행 컨텍스트에서 참조할 수 있는 값(및 기타 역할 도메인)에 대한 참조가 포함됩니다.(⛓: "헤이, 이것들은 모두 네가 이 상하문에서 인용할 수 있는 값이다."범위 체인은 실행 상하문을 만들 때 만듭니다. 이것은 실행할 때 만듭니다.
그러나 이 글에서 나는 일반적으로 대상을 활성화시키거나 상하문을 집행하는 것에 대해 이야기하지 않는다. 우리는 범위만 주목한다!다음 예에서 컨텍스트에서 범위 체인 대 변수에 대한 참조를 나타내는 키/값 쌍을 실행합니다.

전역적으로 상하문을 실행하는 역할역체인은 3개의 변수를 인용했다. name 대역값Lydia, age 대역값21, 그리고 city 대역값San Francisco이다.로컬 상하문에서 우리는 두 가지 변수를 인용했다. name 과 Sarah 값 age 이다.
우리가 22 함수에 접근하려고 시도할 때, 엔진은 우선 국부 범위 체인을 검사합니다.

로컬 범위 체인은 getPersonInfo과 name를 인용했습니다!age의 값은 name이고 Sarah의 값은 age이다.그러나 지금 방문을 시도할 때 22 무슨 일이 일어날까요?city의 값을 찾기 위해 엔진은 범위 체인을 따라 아래로 내려갑니다.이것은 기본적으로 엔진이 쉽게 포기하지 않는다는 것을 의미할 뿐이다. 엔진은 국부 작용역에서 인용된 외부 작용역에서 변수 city 의 값을 찾기 어려우며, 이 예에서 전체적인 대상이다.

전역 상하문에서 우리는 city의 값으로 변수city를 성명했기 때문에 변수San Francisco를 인용했다.현재 우리는 변수의 값이 생겼다. 함수city는 문자열getPersonInfo을 되돌릴 수 있다.🎉
우리는 범위 체인을 따라 내려갈 수 있지만, 범위 체인을 따라 올라갈 수는 없다.(그래, 곤혹스러울 수도 있어. 어떤 사람들은 위로 향하는 것이지 아래로 향하는 것이 아니라고 하기 때문에 나는 단지 다른 말로 바꾸고 싶다. 너는 외부의 범위로 갈 수 있지만 내부로 갈 수는 없다...(내부...)망원경.나는 그것을 폭포로 상상하는 것을 좋아한다.

더 깊게:

이 코드를 예로 들자.

이것은 거의 같지만, 매우 큰 차이가 있다. 우리는 현재 Sarah is 22 and lives in San Francisco 함수에서만 city 전체 범위가 아니라 getPersonInfo 함수를 성명했다.우리는 getPersonInfo 함수를 호출하지 않았기 때문에 로컬 상하문을 만들지 않았습니다.그러나 우리는 전 세계에서 name, age와 city의 가치를 얻으려고 한다.

얘가 하나 던졌어ReferenceError!이것은 전역적으로 city 라는 변수에 대한 인용을 찾을 수 없고, 찾을 수 있는 외부 범위도 없고, 범위 체인에 들어갈 수 없습니다.
이런 방식을 통해, 당신은 범위를 '보호' 변수와 변수 이름을 다시 사용하는 방식으로 사용할 수 있습니다.
전역과 국부 작용역을 제외하고 블록 작용역도 있다.let 또는 const 키워드로 성명된 변수의 작용역은 가장 가까운 괄호({})이다.

const age = 21

function checkAge() {
  if (age < 21) {
    const message = "You cannot drink!"
    return message
  } else {
    const message = "You can drink!"
    return message
  }
} 

역할 영역을 다음과 같이 시각화할 수 있습니다.

우리는 전역 범위, 함수 범위와 두 개의 블록 범위가 있다.우리는 변수message를 두 번 성명할 수 있다. 왜냐하면 변수의 작용역은 괄호이기 때문이다.
한 번 더 살펴보십시오.

범위 체인을 현재 컨텍스트에서 액세스할 수 있는 값의 참조 체인으로 볼 수 있습니다.

작용역은 작용역 체인 하류에서 정의한 변수 이름을 다시 사용할 수 있다. 왜냐하면 작용역 체인 하류에서만 사용할 수 있고 위로 올라갈 수 없기 때문이다.

이게 바로 범위(체인)!이 점에 관해서는 아직 할 말이 많기 때문에, 내가 시간이 있을 때, 나는 추가 정보를 추가할 수 있다.만약 당신에게 무슨 어려움이 있으면 언제든지 질문을 하세요. 저는 기꺼이 도와드리겠습니다.💕