me_javascript 기술로 자바스크립트 실행 컨텍스트 배우기

이 글에서는 자바스크립트의 가장 기본적인 부분인 실행 컨텍스트에 대해 살펴보겠습니다. 이 글을 읽고 나면 인터프리터가 무엇을 하는지, 함수와 변수가 선언되기 전에 왜 사용될 수 있는지, 그 값이 어떻게 결정되는지에 대한 명확한 아이디어를 갖게 될 것입니다.

1. EC—실행 환경 또는 실행 컨텍스트

컨트롤러가 ECMAScript 실행 가능 코드에 도달할 때마다 컨트롤러는 실행 컨텍스트로 들어갑니다(정말 멋진 개념입니다).

JavaScript에서 EC는 세 가지 유형으로 나뉩니다.

• 글로벌 레벨 코드 –– 코드가 로드되면 엔진이 처음 진입하는 기본 코드 실행 환경입니다.
• 함수 수준 코드 – 함수가 실행되면 함수 본문에 있는 코드가 실행됩니다.
• Eval 코드 –– Eval 함수 내에서 실행되는 코드입니다.

EC 구축은 실행 컨텍스트 진입(생성 단계)과 실행 단계(코드 활성화/실행)의 두 단계로 나뉩니다.

1) 컨텍스트 단계 진입: 은 함수가 호출될 때 발생하지만 특정 코드를 실행하기 전(예: 함수 매개변수를 지정하기 전)
스코프 체인(Scope Chain) 생성
변수, 함수 및 매개변수를 만듭니다.
"this"의 가치를 찾아보세요.
2) 코드 실행 단계:
변수 할당
기능 참고
다른 코드를 해석/실행합니다.
EC를 객체로 생각할 수 있습니다.

EC={
  VO:{/* 函数中的arguments对象, 参数, 内部的变量以及函数声明 */},
  this:{},
  Scope:{ /* VO以及所有父执行上下文中的VO */}
}

이제 전역 및 함수 컨텍스트가 포함된 코드 예제를 살펴보겠습니다.

아주 간단한 예로 보라색 테두리로 둘러싸인 전역 컨텍스트와 녹색, 파란색, 주황색 테두리로 둘러싸인 세 가지 다른 기능 컨텍스트가 있습니다. 다른 컨텍스트에서는 전역 컨텍스트에만 액세스할 수 있습니다.

함수 컨텍스트는 원하는 만큼 가질 수 있습니다. 함수를 호출하여 새 컨텍스트를 생성할 때마다 함수 내부에 선언된 모든 변수는 현재 함수 범위 외부에서 직접 액세스할 수 없습니다. 위의 예에서 함수는 현재 컨텍스트 외부의 변수 선언에 액세스할 수 있지만 외부 컨텍스트의 내부 변수/함수 선언에는 액세스할 수 없습니다. 왜 이런 일이 발생합니까? 코드는 정확히 어떻게 해석됩니까?

2. ECS—실행 컨텍스트 스택

일련의 활동 실행 컨텍스트가 논리적으로 스택을 형성합니다. 스택의 맨 아래는 항상 전역 컨텍스트이고, 스택의 맨 위는 현재(활성) 실행 컨텍스트입니다. 서로 다른 실행 컨텍스트 간에 전환할 때(새 실행 컨텍스트 종료 및 입력) 스택이 수정됩니다(스택을 푸시하거나 팝하여).

푸시: 글로벌 EC—>로컬 EC1—>로컬 EC2—>현재 EC
팝: 글로벌 EC

배열을 사용하여 환경 스택을 나타낼 수 있습니다.

ECS=[局部EC,全局EC];

컨트롤러가 함수에 들어갈 때마다(함수가 재귀적으로 호출되거나 생성자로 사용되는 경우에도) 푸시 작업이 발생합니다. 이 프로세스는 JavaScript 배열의 푸시 및 팝 작업과 유사합니다.

브라우저의 JavaScript 인터프리터는 단일 스레드로 구현됩니다. 즉, 한 번에 한 가지 일만 발생할 수 있으며 다른 라인이나 이벤트는 실행 스택이라고 불리는 곳에 대기하게 됩니다. 아래 다이어그램은 단일 스레드 스택의 추상적인 보기입니다.

우리는 브라우저가 스크립트를 처음 로드할 때 기본적으로 전역 실행 컨텍스트로 들어간다는 것을 이미 알고 있습니다. 전역 코드에서 함수를 호출하면 프로그램의 타이밍이 호출된 함수에 들어가고 새 실행 컨텍스트를 스레드하여 새로 생성된 컨텍스트를 실행 스택의 맨 위로 푸시합니다.

현재 함수 내에서 다른 함수를 호출하면 여기서도 같은 일이 발생합니다. 코드의 실행 흐름은 새로운 실행 컨텍스트를 생성하고 이를 실행 스택의 맨 위로 푸시하는 내부 함수로 들어갑니다. 브라우저는 항상 스택 상단에서 실행 컨텍스트를 실행합니다. 현재 컨텍스트 함수의 실행이 완료되면 스택 상단에서 팝되고 컨텍스트 제어가 현재 스택으로 전달됩니다. 다음 예는 재귀 함수의 실행 스택 호출 프로세스를 보여줍니다.

(function foo(i) {
  if (i === 3) {
    return;
  }
  else {
    foo(++i);
  }
}(0));

这代码调用自己三次，每次给i的值加一。每次foo函数被调用，将创建一个新的执行上下文。一旦上下文执行完毕，它将被从栈顶弹出，并将控制权返回给下面的上下文，直到只剩全局上下文能为止。

有5个需要记住的关键点，关于执行栈（调用栈）：

• 单线程。
• 同步执行。
• 一个全局上下文。
• 无限制函数上下文。
• 每次函数被调用创建新的执行上下文，包括调用自己。

3、VO—变量对象

每一个EC都对应一个变量对象VO，在该EC中定义的所有变量和函数都存放在其对应的VO中。

VO分为全局上下文VO（全局对象，Global object，我们通常说的global对象）和函数上下文的AO。

VO: {
 // 上下文中的数据 ( 函数形参（function arguments）， 函数声明（FD),变量声明（var）)
}

1）、进入执行上下文时，VO的初始化过程具体如下：

函数的形参（当进入函数执行上下文时）—— 变量对象的一个属性，其属性名就是形参的名字，其值就是实参的值；对于没有传递的参数，其值为undefined；

函数声明（FunctionDeclaration, FD） —— 变量对象的一个属性，其属性名和值都是函数对象创建出来的；如果变量对象已经包含了相同名字的属性，则替换它的值；

变量声明（var，VariableDeclaration） —— 变量对象的一个属性，其属性名即为变量名，其值为undefined;如果变量名和已经声明的函数名或者函数的参数名相同，则不会影响已经存在的属性。
注意：该过程是有先后顺序的。

2）、 执行代码阶段时，VO中的一些属性undefined值将会确定。

4、AO活动对象

在函数的执行上下文中，VO是不能直接访问的。它主要扮演被称作活跃对象（activation object）（简称：AO）的角色。
这句话怎么理解呢，就是当EC环境为函数时，我们访问的是AO，而不是VO。

VO(functionContext) === AO;

AO是在进入函数的执行上下文时创建的，并为该对象初始化一个arguments属性，该属性的值为Arguments对象。

AO = {
 arguments: {
  callee:,
  length:,
  properties-indexes: //函数传参参数值
 }
};

FD的形式只能是如下这样：

function f(){

}

当函数被调用是executionContextObj被创建，但在实际函数执行之前。这是我们上面提到的第一阶段，创建阶段。在此阶段，解释器扫描传递给函数的参数或arguments，本地函数声明和本地变量声明，并创建executionContextObj对象。扫描的结果将完成变量对象的创建。

内部的执行顺序如下：

1、查找调用函数的代码。

2、执行函数代码之前，先创建执行上下文。
3、进入创建阶段：

• 初始化作用域链：
• 创建变量对象：
• 创建arguments对象，检查上下文，初始化参数名称和值并创建引用的复制。
• 扫描上下文的函数声明：为发现的每一个函数，在变量对象上创建一个属性（确切的说是函数的名字），其有一个指向函数在内存中的引用。如果函数的名字已经存在，引用指针将被重写。
• 扫面上下文的变量声明：为发现的每个变量声明，在变量对象上创建一个属性——就是变量的名字，并且将变量的值初始化为undefined，如果变量的名字已经在变量对象里存在，将不会进行任何操作并继续扫描。
• 求出上下文内部“this”的值。

4、激活/代码执行阶段：
在当前上下文上运行/解释函数代码，并随着代码一行行执行指派变量的值。

示例

1、具体实例

function foo(i) {
  var a = ‘hello‘;
  var b = function privateB() {

  };
  function c() {

  }
}

foo(22);

当调用foo(22)时，创建状态像下面这样：

fooExecutionContext = {
  scopeChain: { ... },
  variableObject: {
    arguments: {
      0: 22,
      length: 1
    },
    i: 22,
    c: pointer to function c()
    a: undefined,
    b: undefined
  },
  this: { ... }
}

真如你看到的，创建状态负责处理定义属性的名字，不为他们指派具体的值，以及形参/实参的处理。一旦创建阶段完成，执行流进入函数并且激活/代码执行阶段，看下函数执行完成后的样子：

fooExecutionContext = {
  scopeChain: { ... },
  variableObject: {
    arguments: {
      0: 22,
      length: 1
    },
    i: 22,
    c: pointer to function c()
    a: ‘hello‘,
    b: pointer to function privateB()
  },
  this: { ... }
}

2、VO示例：

alert(x); // function
var x = 10;
alert(x); // 10
x = 20;
function x() {};
alert(x); // 20

进入执行上下文时，

ECObject={
 VO:{
  x:<reference to FunctionDeclaration "x">
 }
};

执行代码时：

ECObject={
 VO:{
  x:20 //与函数x同名，替换掉，先是10，后变成20
 }
};

对于以上的过程，我们详细解释下。

在进入上下文的时候，VO会被填充函数声明； 同一阶段，还有变量声明“x”，但是，正如此前提到的，变量声明是在函数声明和函数形参之后，并且，变量声明不会对已经存在的同样名字的函数声明和函数形参发生冲突。因此，在进入上下文的阶段，VO填充为如下形式：

VO = {};

VO['x'] = <引用了函数声明'x'>

// 发现var x = 10;
// 如果函数“x”还未定义
// 则 "x" 为undefined, 但是，在我们的例子中
// 变量声明并不会影响同名的函数值

VO['x'] = <值不受影响，仍是函数>

执行代码阶段，VO被修改如下：

VO['x'] = 10;
VO['x'] = 20;

如下例子再次看到在进入上下文阶段，变量存储在VO中（因此，尽管else的代码块永远都不会执行到，而“b”却仍然在VO中）

if (true) {
  var a = 1;
} else {
  var b = 2;
}

alert(a); // 1
alert(b); // undefined, but not "b is not defined"

3、AO示例：

function test(a, b) {
  var c = 10;
  function d() {}
  var e = function _e() {};
  (function x() {});
}

test(10); // call

当进入test(10)的执行上下文时，它的AO为：

testEC={
  AO:{
      arguments:{
      callee:test
      length:1,
      0:10
    },
    a:10,
    c:undefined,
    d:<reference to FunctionDeclaration "d">,
    e:undefined
  }
};

由此可见，在建立阶段，VO除了arguments，函数的声明，以及参数被赋予了具体的属性值，其它的变量属性默认的都是undefined。函数表达式不会对VO造成影响，因此，(function x() {})并不会存在于VO中。

当执行 test(10)时，它的AO为：

testEC={
  AO:{
    arguments:{
      callee:test,
      length:1,
      0:10
    },
    a:10,
    c:10,
    d:<reference to FunctionDeclaration "d">,
    e:<reference to FunctionDeclaration "e">
  }
};

可见，只有在这个阶段，变量属性才会被赋具体的值。

5、提升（Hoisting）解密

在之前的JavaScript Item中降到了变量和函数声明被提升到函数作用域的顶部。然而，没有人解释为什么会发生这种情况的细节，学习了上面关于解释器如何创建active活动对象的新知识，很容易明白为什么。看下面的例子：

(function() {

  console.log(typeof foo); // 函数指针
  console.log(typeof bar); // undefined

  var foo = ‘hello‘,
    bar = function() {
      return ‘world‘;
    };

  function foo() {
    return ‘hello‘;
  }

}());

我们能回答下面的问题：

1、为什么我们能在foo声明之前访问它？
如果我们跟随创建阶段，我们知道变量在激活/代码执行阶段已经被创建。所以在函数开始执行之前，foo已经在活动对象里面被定义了。

2、foo被声明了两次，为什么foo显示为函数而不是undefined或字符串？
尽管foo被声明了两次，我们知道从创建阶段函数已经在活动对象里面被创建，这一过程发生在变量创建之前，并且如果属性名已经在活动对象上存在，我们仅仅更新引用。
因此，对foo()函数的引用首先被创建在活动对象里，并且当我们解释到var foo时，我们看见foo属性名已经存在，所以代码什么都不做并继续执行。

3、为什么bar的值是undefined？
bar实际上是一个变量，但变量的值是函数，并且我们知道变量在创建阶段被创建但他们被初始化为undefined。

以上就是本文的全部内容，有详细的问题解答，示例代码，帮助大家更加了解javascript的执行上下文，希望大家喜欢这篇文章。