자바스크립트의 범위 체인에 대한 자세한 소개(예제 포함)

이 글은 JavaScript의 범위 체인에 대한 자세한 소개를 제공합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

개요

JavaScript의 실행 코드에는 실행 컨텍스트가 있습니다. 실행 컨텍스트에는 세 가지 중요한 요소가 있습니다.

1. 변수 개체(변수 개체)

2. 스코프 체인(범위 체인)

3. this

여기서 변수 객체는 컨텍스트의 변수 선언 및 함수 선언의 모음입니다.
이것은 누가 변수 객체를 보유하고 있는지 나타내며 항상 현재 컨텍스트를 가리킵니다.

스코프 체인은 변수와 함수의 가시성과 수명 주기를 제어합니다.

1. 범위 체인

JavaScript 엔진은 변수 식별자에 해당하는 바인딩을 찾을 때 바깥쪽으로 버블링하여 가장 안쪽 범위에서 검색을 시작합니다. 일치하는 첫 번째 식별자가 발견되면 검색이 중지됩니다. 이는 JS의 범위 체인입니다.

var name = "global";
function func1() {
    var name = "outter";
    function func2() {
        var name = "inner";
        console.log(name);
    }
    func2();
}

func1() // "inner"

console.log(name)语句中，JS 在查找 name변수 식별자를 바인딩할 때 변수 선언은 func2 내부에서 외부 함수까지 최상위 수준까지 검색됩니다. 결국 가장 가까운 "내부" 값만 취하고, 첫 번째 값이 발견되면 검색이 중지됩니다. 이를 "그림자 효과"라고 ​​합니다.

2. 생성 및 실행 단계

각 함수에는 [[scope]] 속성이 있습니다. 동시에 범위 체인은 함수가 정의될 ​​때 실행 컨텍스트와 연결됩니다. 상위 컨텍스트의 모든 변수 개체.

var a = 1;
var b = 3;
function foo(){
  var a = 2;
  bar(4);
  function bar(param){
    console.log(a+param)
  }
}


foo.[[scope]] = [
  globalContext.VO // a, b
];

bar.[[scope]] = [
    fooContext.AO, // a
    globalContext.VO // a, b
];

돌아오기:

함수 실행에는 생성 단계와 실행 단계가 있으며, 변수 개체의 값은 때에 따라 다릅니다.

함수 생성 단계

일반적으로 범위 체인은 상위 변수 개체(범위 체인의 최상위), 함수 자체 변수 VO 또는 활성화 개체로 구성된 목록입니다.

var a = 2;
function foo() {
    var b = 3;
    console.log(a+b);
}
foo() // 5

물론 최종 결과 출력이 5인 것을 알지만 생성 단계에서 흥미로운 점이 있습니다.
우선 변수는 전역 환경의 변수에 속하고 b는 전역 환경의 변수에 속합니다. foo 함수 환경 생성 단계에서 두 값은 모두 정의되지 않습니다.

globalContext.VO = {
    a: undefined
}

fooContext.VO = {
    b: undefined
}

foo 컨텍스트에는 a가 포함되어 있지 않으며 foo는 범위를 통해 발견된 a입니다. 즉,

fooContext = {
    [[scope]]: {
        // 父级的变量对象
    }
}

현재 실행 컨텍스트의 [[scope]]에는 모든 상위 컨텍스트의 변수 개체 목록이 포함되어 있습니다.

함수 실행 단계

함수 실행 단계에 들어가면 함수 컨텍스트는 현재 실행 컨텍스트의 변수 개체를 활성 개체로 변환하여 범위 체인 앞에 배치하고 마지막으로 변수의 값을 수정합니다. 변수 .

scope = [AO].contat([[scope]])

그래서 마지막에 변수를 찾을 때는 항상 가장 안쪽의 실행 컨텍스트에서 시작한 다음 버블링하여 바깥쪽으로 검색하세요.

3. 범위 체인 확장

JS에서는 with 및 try catch 키워드를 사용하여 범위 체인에 추가되도록 읽기 전용 개체를 지정할 수 있습니다.

catch의 경우 예외 객체가 변경 가능한 객체로 푸시되고 범위의 선두에 배치됩니다.

With 및 try catch는 모두 현재 범위에서 액세스할 수 있는 변수 개체의 수를 늘리므로 범위 체인을 확장하는 것으로 간주됩니다.

4. 범위 체인 및 프로토타입 체인

스코프 체인의 기능은 식별자를 찾고, 범위 체인을 따라 바깥쪽으로 검색하고, 첫 번째 식별자를 찾으면 중지하는 것입니다.

프로토타입 체인은 객체의 속성을 검색하는 데 사용됩니다. 일반 프로토타입 체인은 체인 상단에서 검색을 원하며 해당 속성이 발견되면 검색이 중지됩니다. 찾을 수 없는 경우 기본값은 정의되지 않음입니다.

5. Closure

변수 실행이 완료되면 메모리에 가비지 수집됩니다. 단, 이때 변수가 다른 범위에 있거나 다른 컨텍스트의 범위 체인에 합류한 후에는 됩니다. , 변수에 계속 액세스할 수 있습니다. 이 동작을 클로저라고 합니다.

function foo() {
    var a = 1;
    function bar (){
        return a;
    }
    return bar;
}

var other = foo();
other();  // 1

foo 함수가 실행된 후에는 내부 변수가 지워졌어야 하는데, 반환된 함수가 변수 a를 참조하기 때문에 클로저를 구성하는 변수 a에 계속 접근할 수 있습니다.

요약

범위 체인은 식별자를 조회하고 내부에서 전역 컨텍스트까지 컨텍스트 조회를 수행하는 데 사용되는 모든 상위 컨텍스트의 변수 개체 목록입니다.

위 내용은 자바스크립트의 범위 체인에 대한 자세한 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!