JavaScript 执行上下文（Execution Context）详解|极客笔记

JavaScript 执行上下文（Execution Context）详解

在JavaScript中，执行上下文是一个非常重要的概念，它决定了代码在运行时的环境和执行顺序。了解执行上下文对于理解JavaScript的工作原理和编写高效的代码非常重要。本文将详细介绍JavaScript执行上下文的概念、类型和创建过程。

什么是执行上下文？

执行上下文是JavaScript代码在运行时的环境，它包含了当前代码的变量、函数、作用域链和this指向等信息。在JavaScript中，执行上下文可以分为三种类型：全局执行上下文、函数执行上下文和eval执行上下文。

全局执行上下文

全局执行上下文是JavaScript代码在最顶层的运行环境，它包含了全局变量和全局函数。在页面加载时，会创建一个全局执行上下文，并且在整个页面的生命周期中都会存在。

// 示例代码
var globalVariable = 'I am a global variable';

function globalFunction() {
  console.log('I am a global function');
}

console.log(globalVariable);
globalFunction();

函数执行上下文

函数执行上下文是在函数被调用时创建的执行环境，每次函数调用都会创建一个新的执行上下文。函数执行上下文包含了函数的参数、局部变量和this指向等信息。

// 示例代码
function add(a, b) {
  var result = a + b;
  console.log(result);
}

add(1, 2);

eval执行上下文

eval执行上下文是由eval()函数执行时创建的执行环境，它会在当前作用域中执行传入的代码字符串。eval执行上下文比较特殊，会影响整个作用域链。

// 示例代码
eval('var message = "Hello, eval";');
console.log(message);

执行上下文的创建过程

在JavaScript中，执行上下文的创建过程是一个逐步深入的过程，主要包括了变量对象的创建、作用域链的建立和this指向的确定。

变量对象的创建

变量对象是执行上下文中的一个重要组成部分，它包含了当前执行环境中的变量、函数和形参。变量对象在执行上下文创建时被初始化。

// 示例代码
function foo() {
  var a = 'Hello';
  var b = 'World';
}

// 在foo函数执行上下文中，变量对象包括了a、b和foo函数

作用域链的建立

作用域链是一个由当前执行上下文和它的父级执行上下文组成的链式结构，用于决定变量查找的顺序。当代码需要访问一个变量时，JavaScript引擎会沿着作用域链逐级查找，直到找到变量或者到达全局执行上下文。

// 示例代码
var globalVar = 'I am a global variable';

function outerFunction() {
  var outerVar = 'I am an outer variable';

  function innerFunction() {
    var innerVar = 'I am an inner variable';
    console.log(innerVar);
    console.log(outerVar);
    console.log(globalVar);
  }

  innerFunction();
}

outerFunction();

this指向的确定

this指向在执行环境创建时被确定，取决于函数的调用方式和调用位置。在全局执行上下文中，this指向全局对象（window对象），在函数执行上下文中，this指向调用该函数的对象。

// 示例代码
var obj = {
  name: 'Alice',
  sayName: function() {
    console.log(this.name);
  }
};

obj.sayName(); // 输出 'Alice'

执行上下文的执行顺序

在JavaScript中，执行上下文的执行顺序是由调用栈（Call Stack）决定的。当一个函数被调用时，会创建一个对应的函数执行上下文并被推入调用栈中，当函数执行完毕后，该执行上下文被弹出调用栈。

// 示例代码
function foo() {
  console.log('foo');
}

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

bar();

在上面的示例中，调用bar()函数时，先创建bar函数执行上下文并推入调用栈，然后在bar函数执行过程中调用foo()函数，会创建foo函数执行上下文并推入调用栈，最终按照调用顺序依次执行。

总结

执行上下文是JavaScript中非常重要的概念，它决定了代码在运行时的环境和执行顺序。了解执行上下文对于理解JavaScript的工作原理和编写高效的代码至关重要。

JavaScript 执行上下文（Execution Context）详解