Javascript의 역할 영역 체인과 어휘 환경

역할 영역과 어휘 환경은 자바스크립트의 기본 개념으로 모든 자바스크립트 개발자가 알고 이해해야 한다.그러나 이 개념은 많은 새로운 자바스크립트 개발자들을 곤혹스럽게 한다.
따라서 이 문서에서 이러한 모든 개념과 JavaScript에서 어떻게 작동하는지 설명하려고 합니다.

범위

Scope in JavaScript refers to the current context of code, which determines the accessibility of variables to JavaScript.

JS에는 다음과 같은 두 가지 역할 영역이 있습니다.

전 세계

국부 범위

기억해야 할 사항:

함수에 정의된 변수는 국부 범위 내

함수 외부에서 정의된 변수는 전역 범위 내에 있다.

모든 함수를 호출할 때 새로운 역할 영역을 만듭니다.

전 세계

문서에서 JavaScript를 작성하기 시작하면 이미 전역에 있습니다.JavaScript 문서에는 전역 역할 영역이 하나만 있습니다.만약 변수가 함수 밖에서 정의된다면, 그것은 전역 범위 내에 있다.

var language = 'JS';

전역 범위 내의 변수는 다른 범위 내에서 접근하고 변경할 수 있습니다.

var language = 'JS';

function handleChange(){
    console.log("Inside Function before modification-> ", language);
    language = 'PHP';
    console.log("Inside Function after modification-> ", language);
}

handleChange();

console.log("Outside function-> ", language);

국부 범위

함수에 정의된 변수는 국부 범위 내에 있다.그것들은 이 함수의 매번 호출에 대해 서로 다른 작용역을 가지고 있다.이것은 같은 이름을 가진 변수가 서로 다른 함수에서 사용할 수 있다는 것을 의미한다.이것은 이러한 변수가 각자의 함수에 귀속되어 있고 함수마다 서로 다른 작용역이 있기 때문에 다른 함수에 접근할 수 없기 때문이다.

var language = 'JS';

function a() {
    var language = 'PHP'
    console.log("Inside Function a()-> ", language); //Output: PHP
    function b() {
        var language = 'C++'
        console.log("Inside Function b()-> ", language); // Output: C++
    }
    b();
}

a();

console.log("Outside function-> ", language); //Output: JS

이것 또한 서로 다른 실행 상하문에서 같은 이름을 가진 변수가 실행 창고에서 위에서 아래로 우선순위를 얻는다는 것을 알려준다.맨 안쪽 함수 (실행 창고의 맨 위 상하문) 에서 다른 변수와 이름이 유사한 변수는 더 높은 우선순위를 가진다.

저지문

함수와 달리 if와 switch 조건이나 for 순환과 같은 블록 문장은 새로운 작용역을 만들지 못한다.Block 문장에 정의된 변수는 이미 존재하는 범위 내에 보존됩니다.

if(true){
    var language = 'JS';
}

console.log(language); // Output: JS

while 키와 반대로 var 키와 let 키는 블록 문장에서 국부 작용역을 설명하는 것을 지원합니다.

if (true) {
    var language = 'JS';
    const language2 = 'PHP';
    let language3 = 'C++';

    console.log("===Inside Block Statement===")
    console.log(language); // Output: JS
    console.log(language2); // Output: PHP
    console.log(language3); // Output: C++
}

console.log("===Outside Block Statement===")

console.log(language); // Output: JS
console.log(language2); // Output: ReferenceError
console.log(language3); // Output: ReferenceError

Global scope lives as long as your application lives. Local Scope lives as long as your functions are called and executed.

범위 체인

The Scope Chain is the hierarchy of scopes that will be searched in order to find a function or variable.

의 작성 단계에서 범위 체인은 변수 객체 다음에 작성됩니다.역할 영역 체인 자체는 변수 대상을 포함한다.
역할 영역 체인은 변수를 해석하는 데 사용됩니다.변수 해석을 요청하면 JavaScript는 항상 코드 중첩의 맨 안쪽에서 시작하여 변수나 다른 리소스를 찾을 때까지 상위 범위로 이동합니다.역할 도메인 체인은 컨텍스트를 직접 수행하는 변수 객체와 해당 상위 객체의 다른 모든 실행 컨텍스트를 포함하는 객체로 간단하게 정의할 수 있으며, 객체에는 다른 객체 세트가 있습니다.

어휘 범위

어법 작용역은 한 그룹의 끼워 넣은 함수에서 내부 함수가 부모 작용역의 변수와 다른 자원에 접근할 수 있음을 의미한다.이것은 하위 함수가 어휘상에서 부 함수의 집행 상하문과 관련이 있다는 것을 의미한다.어법 범위는 때때로 정적 범위라고도 부른다.

function a() {
    var language = 'PHP'
    console.log("Inside Function a()-> ", language); //Output: PHP

    function b() {

        console.log("Inside Function b() before modification-> ", language); // Output: PHP
        language = 'C++'
        console.log("Inside Function b() after modification-> ", language); // Output: C++

        var count = 3;
        console.log("Count inside b()-> ", count); //Output: 3
    }

    b();
    console.log("Inside Function a() after modification-> ", language); // Output: C++
    console.log("Count inside a()-> ", count); //Output: ReferenceError
}

a();

Lexical Scope works in a forward manner.

const 하위 레벨 실행 컨텍스트를 통해 액세스할 수 있습니다.그러나 부모 레벨로 뒤로 실행할 수 없습니다. 이것은 이 변수 language 가 부모 레벨에 접근할 수 없다는 것을 의미합니다.

어휘 환경

JavaScript 엔진이 함수 또는 전역 코드를 실행하기 위한 실행 컨텍스트를 작성할 때마다 함수가 실행되는 동안 함수에 정의된 변수를 저장할 새 어휘 환경을 만듭니다.
문법 환경은 표지부 변수의 매핑을 저장하는 데이터 구조이다.(이 식별자는 변수/함수의 이름을 가리키며, 변수는 실제 대상[함수 유형 대상 포함) 또는 원어 값을 가리킨다.
어휘 환경에는 두 가지 구성 부분이 있다.

환경 기록: 변수와 함수 성명의 실제 위치를 저장합니다.

외부 환경에 대한 인용: 외부 (아버지) 어휘 환경에 접근할 수 있음을 의미합니다.

어휘 환경은 개념적으로 다음과 같다.

lexicalEnvironment = {
  environmentRecord: {
    <identifier> : <value>,
    <identifier> : <value>
  }
  outer: < Reference to the parent lexical environment>
}

간단한 예를 들어 이 점을 이해합시다.

let language = 'JS';
function a() {
  let b = 25;  
  console.log('Inside function a()');
}
a();
console.log('Inside global execution context');

JavaScript 엔진이 전역 실행 컨텍스트를 작성하여 전역 코드를 실행할 때 전역에 정의된 변수와 함수를 저장할 새 어휘 환경을 만듭니다.따라서 전체적인 어휘 환경은 다음과 같다.

globalLexicalEnvironment = {
  environmentRecord: {
      language    : 'JS',
      a : < reference to function object >
  }
  outer: null
}

여기 외부 어법 환경은 count로 설정되어 있는데 전체 범위에 외부 어법 환경이 없기 때문이다.
엔진이 () 함수에 실행 상하문을 만들 때, 함수 실행 중 이 함수에 정의된 변수를 저장하는 문법 환경을 만들 것입니다.그래서 함수의 어휘 환경은 다음과 같다.

functionLexicalEnvironment = {
  environmentRecord: {
      b    : 25,
  }
  outer: <globalLexicalEnvironment>
}

함수의 외부 문법 환경은 전역 문법 환경으로 설정됩니다. 왜냐하면 함수는 원본 코드에서 전역 범위에 둘러싸여 있기 때문입니다.
함수가 완성되면 실행 상하문은 창고에서 삭제되지만, 문법 환경은 메모리에서 삭제될 수도 있고, 메모리에서 삭제되지 않을 수도 있습니다. 이것은 이 문법 환경이 외부 문법 환경 속성의 다른 문법 환경에서 인용되는지 여부에 달려 있습니다.

끝!

읽어주셔서 감사합니다!!나는 이것이 한 문장에서 매우 많은 소모를 했다는 것을 안다.나는 그것이 어느 정도 도움이 되기를 바란다.네트워크와 공유하십시오.아래에 너의 평론을 남기는 것을 잊지 마라.