JavaScript 之执行上下文 - HelloWorld开发者社区

本文共 1090 字，读完只需 4 分钟

概述

JavaScript 是函数式编程语言，作用域也是以函数为单位，那么，这些函数代码块是怎么样的顺序进行的呢， JS 的可执行代码又分为 3 种，不同类型的代码有不一样的执行环境。本文就梳理有关 JS 执行上下文（execution context）,也叫执行环境的知识。

活动的执行代码的上下文在语言底层逻辑上构成一个执行上下文栈（excution context stack），我们知道，栈有两个行为，压入栈和弹出栈，并且有后进先出的特点, 最先进入的项会在栈底最后弹出。

不同执行环境的有其相应的变量对象（Variable Object），某个执行环境的所有可执行代码都执行完毕后，该环境中的变量对象和函数定义会被清除。

函数代码会在执行完后清除变量占用的内存，全局代码则会在关闭环境，比如关闭浏览器后清除。

一、代码类型

JS 中可执行的代码可分为三种类型：

全局代码
函数代码
Eval 代码

全局代码

在 web 浏览器中，全局执行环境是 window 对象，所有的全局变量和函数都是作为 window 的属性和方法存在。

全局代码的执行上下文栈可以表示为：

ECStack = [
    globalContext
]

函数代码

当执行函数代码时，函数代码上下文被压入到执行上下文栈中。函数代码的执行环境中，有自己的内部的定义的变量和声明。

function foo1() {
    var name1 = "a";
    console.log(name1)
}

function foo2(){
    var name2 = "b";
    console.log(name2)
}

foo1();
foo2();

上面的执行上下文可以表示为：

ECStack = [
    globalContext
];

ECStack.push(<foo1> functionContext);
ECStack.pop();
ECStack.push(<foo2> functionContext);
ECStack.pop();

一个函数，可能有多个执行上下文，每个函数的调用都会产生新的上下文。

function foo() {
    ...
}

foo("a");
foo("b");
foo("c");

eval 代码

eval 关键字接受一个字符串作为参数，并将其作为书写文字上下文的代码。

function foo(str, a) {
    eval( str );  // 声明一个新变量
    console.log(a, b);
}
var b = 123;

foo("var b = 456 ", 123) // 123, 456

以上代码引用《你不知道的 JavaScript》的例子，eval 函数中的字符串，被当做可执行代码，最后在 foo 函数中声明了 b 变量，并覆盖了 foo 函数外部的 b 变量。

eval 函数和 JS 的词法作用域的行为，会造成变量环境和执行上下文的混乱，尽量别使用它。

二、执行上下文栈

前面其实已经提到很多关于执行上下文栈的内容，简而言之，JS 在遇到全局代码，函数代码，eval 代码时，会创建相应的执行上下文，不同的上下文，有其变量对象（variable object: VO）和作用域。

看这一段代码：

function func3() {
    console.log('fun3')
}

function func2() {
    func3();
}

function func1() {
    func2();
}

func1();

以上代码引用自冴羽的github，代码顺序用执行上下文栈来表示就是：

ECStack.push(globalContext);

// 调用 func1()， 进入 func1 执行环境
ECStack.push(<func1> functionContext);

// func1中调用了 func2，进入 func2 的执行上下文
ECStack.push(<func2> functionContext);

// func2 调用 func3, 进入 func3 的执行上下文
ECStack.push(<func3> functionContext);

// func3 执行完毕,退出 func3 执行环境
ECStack.pop();

// func2 执行完毕，退出 func2 执行环境
ECStack.pop();

// func1 执行完毕，退出 func1 执行环境
ECStack.pop();

函数代码执行完毕后，执行上下文栈底只剩下全局代码上下文 globalContext, 直到关闭浏览器才会彻底清空执行上下文栈。