JS의 실행 컨텍스트를 이해하는 방법을 단계별로 가르칩니다.

이 기사에서는 JavaScript의 실행 컨텍스트를 깊이 이해하기 위해 단계별로 설명합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

실행 컨텍스트를 이해해야만 변수 승격, 범위, 클로저 등 JavaScript 언어 자체를 더 잘 이해할 수 있습니다.

실행 컨텍스트

실행 컨텍스트는 현재 코드의 실행 환경입니다. .

실행 컨텍스트에는 주로 세 가지 유형이 있습니다.

• 전역 실행 컨텍스트: 전역 실행 환경은 브라우저의 전역 개체가 창이며 이 개체를 가리킵니다

• .

  함수 실행 컨텍스트: 셀 수 없이 많을 수 있으며 함수가 호출될 때 생성됩니다. 각 함수 호출은 새로운 실행 컨텍스트를 생성합니다.

• 평가 실행 컨텍스트, 거의 사용되지 않습니다.

각 실행 컨텍스트에는 세 가지 중요한 속성이 있습니다.

• 변수 개체(VO): 각 실행 환경에는 환경에 정의된 변수 개체가 연결되어 있습니다. 모든 변수와 함수는 다음 위치에 저장됩니다. 이 개체. 우리가 작성하는 코드는 이 객체에 액세스할 수 없지만 파서는 데이터를 처리할 때 뒤에서 이를 사용합니다.

함수 컨텍스트에서는 활성화 개체(AO)를 사용하여 변수 개체를 나타냅니다. 활성 개체와 변수 개체는 실제로 동일한 것입니다. 실행 환경에 들어갈 때만 이 실행 컨텍스트의 변수 개체를 활성 개체(AO)라고 합니다. 접근할 수 있습니다.

• Scope chain: 환경에서 코드가 실행되면 변수 개체의 범위 체인이 생성됩니다. 범위 체인의 목적은 실행 환경에서 액세스할 수 있는 모든 변수 및 함수에 대한 순서화된 액세스를 보장하는 것입니다.

• this

생성-> 실행-> 재활용

1. 생성 단계:

1.1 변수 객체 생성:

• 초기화 기능 매개변수 인수
• 함수 선언
• 변수 선언

변수 객체를 이해하기 위한 간단한 예

function getName(name) {
    var b = 2;
    function foo() {};
    var bar = function() {};

}
getName('lucystar')

이때 AO는 대략 다음과 같습니다

AO = {
    arguments: {
        0: 'lucystar',
        length: 1
    },
    name: 'lucystar',
    b: undefined,
    foo: reference to function foo(){},
    bar: undefined
}

위 예는 이전에 from에서 했던 변수 승격과 함수 승격을 포함합니다. JS var, let, const에 대한 기본 이해도 이 기사에서 소개되었습니다

1.2 범위 체인 만들기

함수의 범위는 함수가 정의될 ​​때 결정됩니다. 범위 체인 자체에는 변수 개체가 포함되어 있으며, 변수를 찾을 때 먼저 현재 컨텍스트의 변수 개체에서 검색합니다. 변수를 찾을 때까지 상위 실행 컨텍스트의 변수 개체에서 검색합니다.

1.3 이것의 방향을 결정하세요

이 부분은 다양한 상황으로 나누어져 있습니다. 자세한 내용은 다른 글을 확인하세요이것&호출&적용&바인딩을 하나의 글로 알아보세요

2.

실행 변수 할당, 코드 실행

3. 재활용 단계

실행 컨텍스트는 스택에서 튀어나와 가비지 수집 메커니즘에 의해 재활용됩니다. 메모리 재활용에 대한 자세한 내용은

V8 메모리 관리 및 가비지 수집 메커니즘

Execution Context Stack

을 확인하세요. 실행 컨텍스트 스택은 실행 컨텍스트를 관리하는 데 사용됩니다. 실행 컨텍스트가 생성된 후 JavaScript 엔진은 실행 컨텍스트를 스택에 푸시합니다. 실행 컨텍스트를 관리하는 데 사용되는 이 스택을 일반적으로 호출 스택이라고도 하는 실행 컨텍스트 스택이라고 합니다.

let a = 'javascript';

function foo() {
    console.log('foo');
    bar();
}
function bar() {
    console.log('bar');
}
foo();

• 위 코드가 브라우저에 로드되면 JavaScript 엔진은 전역 실행 컨텍스트를 생성하여 현재 실행 스택에 푸시합니다.

• foo() 함수 호출이 발생하면 JavaScript 엔진은 foo 함수 실행 컨텍스트를 생성하고 이를 현재 실행 스택의 맨 위로 푸시합니다.

  foo() 函数调用时， JavaScript 引擎创建了一个 foo 函数执行上下文并把它压入到当前执行栈的顶部。

• 当从 foo() 函数内部调用 bar() 函数时，JavaScript 引擎创建了一个 bar 函数执行上下文并把它压入到当前执行栈的顶部。

• 当函数 bar 执行完毕，它的执行上下文会从当前栈中弹出，控制流程到达下一个执行上下文，即 foo()

foo() 함수 내에서 bar() 함수가 호출되면 JavaScript 엔진은 bar 함수 실행 컨텍스트를 생성하고 이를 현재 실행에 푸시합니다. 상단의 스택.

• 🎜함수 표시줄의 실행이 완료되면 해당 실행 컨텍스트가 현재 스택에서 팝되고 제어 흐름은 foo() 함수의 실행 컨텍스트인 다음 실행 컨텍스트에 도달합니다. 🎜🎜🎜🎜foo()가 실행을 완료하면 해당 실행 컨텍스트가 스택에서 팝되고 제어 흐름이 전역 실행 컨텍스트에 도달합니다. 모든 코드 실행이 완료되면 javaScript 엔진은 현재 스택에서 전역 실행 컨텍스트를 제거합니다. 🎜

기본 데이터 유형은 스택에 저장되고 참조 데이터 유형은 힙에 저장되는 이유는 무엇입니까? JavaScript 엔진은 프로그램 실행 중에 컨텍스트 상태를 유지하기 위해 스택을 사용해야 합니다. 스택 공간이 크면 모든 데이터가 스택 공간에 저장되므로 컨텍스트 전환 효율성에 영향을 미치므로 실행 효율성이 떨어집니다. 전체 프로그램.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 JS의 실행 컨텍스트를 이해하는 방법을 단계별로 가르칩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!