JavaScript 실행 컨텍스트에 대한 자세한 소개(코드 포함)

이 글은 JavaScript 실행 컨텍스트(코드 포함)에 대한 자세한 소개를 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

"JS 심층 학습 - 실행 컨텍스트 스택"에서 언급한 것처럼 JavaScript 코드가 실행 가능한 코드(실행 가능 코드) 조각을 실행할 때 해당 실행 컨텍스트(실행 컨텍스트)가 생성됩니다

각 실행 컨텍스트마다, 그들은 모두 세 가지 중요한 속성을 가지고 있습니다:

Variable object VO
Scope chain
this

이 기사에서는 이 세 부분의 내용을 결합하여 실행 컨텍스트의 구체적인 처리 프로세스에 대해 설명합니다.

생각하는 질문

"JS 심층 학습 - 어휘 범위 및 동적 범위"에서 다음 질문이 제기됩니다.

// 思考题一：
var scope = "global scope";
function checkscope(){
  var scope = "local scope";
  function f(){
    return scope;
  }
  return f();
}
checkscope();

// 思考题二：
var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();

두 코드 조각 모두 로컬 범위를 인쇄하지만 여전히 약간의 차이점이 있는 글에서는 실행 컨텍스트 스택과 실행 컨텍스트의 구체적인 변경 프로세스를 자세히 분석합니다. local scope,但是还是有些许差异的，本文就详细的解析执行上下文栈和执行上下文的具体变化过程。

具体分析

我们分析第一段代码：

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();

执行过程如下：

1、执行全局代码，创建全局执行上下文，全局上下文被压入执行上下文栈

ECStack = [
  globalContext
];

2、全局上下文初始化

globalContext = {
  VO: [global],
  Scope: [globalContext.VO],
  this: globalContext.VO
}

2、初始化的同时，checkscope 函数被创建，保存作用域链到函数内部的属性[[scope]]

checkscope.[[scope]] = [
  globalContext.VO
];

3、执行checkScope 函数，创建checkScope 函数执行上下文，checkScope 函数执行上下文被压入执行上下文栈：

ECStack = [
  checkscopeContext,
  globalContext
];

4、checkscope 函数执行上下文初始化：

1.复制函数 [[scope]] 属性创建作用域链，
2.用 arguments 创建活动对象，
3.初始化活动对象，即加入形参、函数声明、变量声明，
4.将活动对象压入 checkscope 作用域链顶端,

同时 f 函数被创建，保存作用域链到 f 函数的内部属性[[scope]]

checkscopeContext = {
  AO: {
      arguments: {
        length: 0
      },
      scope: undefined,
      f: reference to function f(){}
  },
  Scope: [AO, globalContext.VO],
  this: undefined
}

5、执行f函数，创建 f 函数执行上下文，f 函数执行上下文被压入执行上下文栈

  ECStack = [
    fContext,
    checkscopeContext,
    globalContext
  ]

6、f 函数执行上下文初始化, 以下跟第 4 步相同：

1.复制函数 [[scope]]
상세 분석

첫 번째 코드 부분을 분석합니다.

  fContext = {
    AO: {
        arguments: {
            length: 0
        }
    },
    Scope: [AO, checkscopeContext.AO, globalContext.VO],
    this: undefined
  }

실행 프로세스는 다음과 같습니다.

1 전역 코드를 실행하고 전역 실행 컨텍스트를 생성한 후 전역 컨텍스트가 실행에 푸시됩니다. context stack

ECStack = [
  checkscopeContext,
  globalContext
]

2. 전역 컨텍스트 초기화

ECStack = [
  globalContext
]

2. 초기화와 동시에 checkscope 함수가 생성되고, [[scope] 함수 내부의 속성에 스코프 체인이 저장됩니다. ]]

rrreee🎜3. checkScope 함수를 실행하고 checkScope 함수 실행 컨텍스트를 생성하면 checkScope 함수 실행 컨텍스트가 실행 컨텍스트 스택으로 푸시됩니다. 🎜rrreee🎜4. Checkscope 함수 실행 컨텍스트 초기화: 🎜1. 함수 [[scope]] 속성을 복사하여 범위 체인을 만듭니다. 🎜2. 인수를 사용하여 활성 개체를 만듭니다. 🎜3 활성 개체를 초기화합니다. 즉, 형식 매개변수, 함수 선언 및 변수를 추가합니다. 선언, 🎜4. 활성 개체를 checkscope 범위 체인의 맨 위로 밀어 넣습니다. 🎜🎜 동시에 f 함수가 생성되고 범위 체인이 저장됩니다. [scope]]🎜rrreee🎜5. f 함수를 실행하고 f 함수 실행 컨텍스트를 생성하면 f 함수 실행 컨텍스트가 실행 컨텍스트 스택으로 푸시됩니다🎜rrreee🎜6. 다음은 4단계와 동일합니다. 🎜

1. 함수 [[scope]] 속성을 ​​복사하여 범위 체인을 만듭니다. 🎜2. 인수를 사용하여 활성 개체를 만듭니다. 🎜3. object, 즉 형식 매개변수, 함수 선언 및 변수 선언을 추가합니다🎜4. 활성 개체를 f 범위 체인의 맨 위로 푸시합니다🎜rrreee🎜7. f 함수가 실행되고 범위 체인을 따라 범위 값을 검색합니다. 그리고 스코프 값을 반환합니다🎜🎜8.f 함수가 실행된 후 실행 컨텍스트 스택에서 f 함수 컨텍스트가 팝됩니다🎜rrreee🎜 9. checkscope 함수가 실행되고, checkscope 실행 컨텍스트가 실행 컨텍스트 스택에서 팝됩니다. 🎜rreee🎜🎜

위 내용은 JavaScript 실행 컨텍스트에 대한 자세한 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!