执行上下文与作用域链

Kpsmart2025年3月7日大约 14 分钟

执行上下文与作用域链

执行上下文是JavaScript代码执行的环境。本文将深入介绍执行上下文的创建和执行过程、变量对象、作用域链的形成以及闭包与执行上下文的关系，帮助您理解JavaScript代码的运行机制。

执行上下文基础

什么是执行上下文

执行上下文（Execution Context）是JavaScript引擎执行代码时的运行环境，它定义了变量、函数声明以及它们之间如何互相访问的规则。

JavaScript中有三种执行上下文类型：

全局执行上下文：代码开始执行时创建的默认上下文，表示全局环境
函数执行上下文：每当函数被调用时创建的上下文
Eval执行上下文：在eval()函数内部执行的代码的上下文（不推荐使用）

执行上下文栈

JavaScript引擎使用执行上下文栈（也称为调用栈）来管理代码执行过程中创建的所有执行上下文：

function first() {
  console.log('Inside first function');
  second();
  console.log('Back to first function');
}

function second() {
  console.log('Inside second function');
}

// 调用first函数
first();
console.log('Back to global execution context');

执行上述代码时，执行上下文栈的变化如下：

创建全局执行上下文，压入栈
调用first()，创建first函数执行上下文，压入栈
在first内部调用second()，创建second函数执行上下文，压入栈
second函数执行完毕，其执行上下文从栈中弹出
继续执行first函数，完成后其执行上下文从栈中弹出
继续执行全局代码

执行上下文的创建过程

执行上下文的创建分为两个阶段：创建阶段和执行阶段。

创建阶段

创建阶段主要完成以下工作：

创建词法环境（Lexical Environment）
创建变量环境（Variable Environment）
确定this的值

词法环境

词法环境是一种规范类型，用于定义标识符（变量、函数名）与其值之间的映射关系。它由两部分组成：

环境记录（Environment Record）：存储变量和函数声明的实际位置
外部环境引用（Outer Reference）：指向外部词法环境的引用，用于实现作用域链

// 词法环境的伪代码表示
LexicalEnvironment = {
  EnvironmentRecord: {
    // 标识符绑定
  },
  OuterReference: <对外部词法环境的引用>
}

变量环境

变量环境也是一个词法环境，但专门用于存储var声明的变量绑定。在ES6中，词法环境和变量环境的主要区别在于前者用于存储函数声明和let、const声明的变量绑定，而后者仅用于存储var声明的变量绑定。

执行阶段

在执行阶段，完成对变量赋值、函数引用以及执行其他代码的操作。

变量对象与活动对象

变量对象（Variable Object）

变量对象是与执行上下文相关的数据作用域。它存储了上下文中定义的变量和函数声明。

对于全局执行上下文，变量对象就是全局对象（在浏览器中是window对象）。

活动对象（Activation Object）

当函数被调用时，会创建一个活动对象作为函数执行上下文的变量对象。活动对象最初包含一个特殊的arguments对象，该对象包含传递给函数的参数。

function foo(a, b) {
  var c = 3;
  function bar() {
    return a + b + c;
  }
  return bar();
}

foo(1, 2); // 6

当调用foo(1, 2)时，创建的活动对象如下：

// foo的活动对象（伪代码表示）
ActivationObject = {
  arguments: { 0: 1, 1: 2, length: 2 },
  a: 1,
  b: 2,
  c: undefined, // 在创建阶段，var声明的变量初始化为undefined
  bar: <function reference>
}

作用域与作用域链

作用域

作用域是指程序中定义变量的区域，它决定了变量的可访问性。JavaScript有以下几种作用域：

全局作用域：在代码中任何地方都能访问的变量
函数作用域：在函数内部定义的变量只能在函数内部访问
块级作用域（ES6引入）：使用let和const声明的变量具有块级作用域

var globalVar = 'I am global'; // 全局作用域

function exampleFunction() {
  var functionVar = 'I am function-scoped'; // 函数作用域
  
  if (true) {
    let blockVar = 'I am block-scoped'; // 块级作用域
    const anotherBlockVar = 'I am also block-scoped'; // 块级作用域
    var notBlockVar = 'I am function-scoped despite being in a block'; // 函数作用域
  }
  
  console.log(functionVar); // 'I am function-scoped'
  console.log(notBlockVar); // 'I am function-scoped despite being in a block'
  console.log(blockVar); // ReferenceError: blockVar is not defined
}

console.log(globalVar); // 'I am global'
console.log(functionVar); // ReferenceError: functionVar is not defined

作用域链

作用域链是由当前执行上下文的词法环境及其所有外部词法环境的引用组成的链表。它用于解析变量：当访问一个变量时，JavaScript引擎会沿着作用域链查找该变量。

作用域链的形成基于词法作用域（也称为静态作用域），即函数的作用域在函数定义时确定，而非调用时。

var x = 10;

function foo() {
  var y = 20;
  
  function bar() {
    var z = 30;
    console.log(x + y + z); // 可以访问x、y和z
  }
  
  bar();
}

foo(); // 输出60

在上面的例子中，bar函数的作用域链包含：

bar函数的词法环境
foo函数的词法环境
全局词法环境

因此，bar函数可以访问变量x、y和z。

闭包与执行上下文

闭包的形成

闭包是指函数及其引用的外部变量的组合，它允许函数访问并操作函数外部的变量。从执行上下文的角度看，闭包是通过作用域链实现的。

function createCounter() {
  let count = 0;
  
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

在上面的例子中，当createCounter函数执行完毕后，其执行上下文应该从执行上下文栈中弹出。但是，由于返回的函数引用了createCounter函数中的count变量，JavaScript引擎会保留createCounter函数的词法环境，使得返回的函数仍然可以访问count变量。

闭包与内存管理

闭包可能导致内存泄漏，因为被引用的外部变量不会被垃圾回收。在使用闭包时，应注意：

只在必要时创建闭包
在不再需要闭包时，将其引用设为null，以便垃圾回收

function createHeavyObject() {
  const heavyData = new Array(1000000).fill('🐘'); // 占用大量内存
  
  return function processData() {
    return heavyData.length;
  };
}

let processor = createHeavyObject(); // 创建闭包
console.log(processor()); // 使用闭包

processor = null; // 允许垃圾回收

实际应用示例

示例1：模块模式

执行上下文和闭包可用于创建私有变量和方法：

const calculator = (function() {
  // 私有变量
  let result = 0;
  
  // 私有方法
  function validate(n) {
    return typeof n === 'number';
  }
  
  // 公共API
  return {
    add: function(n) {
      if (validate(n)) {
        result += n;
      }
      return this;
    },
    subtract: function(n) {
      if (validate(n)) {
        result -= n;
      }
      return this;
    },
    getResult: function() {
      return result;
    }
  };
})();

calculator.add(5).subtract(2);
console.log(calculator.getResult()); // 3
console.log(calculator.result); // undefined，私有变量无法直接访问

示例2：异步回调中的作用域

理解执行上下文和作用域链对于处理异步代码至关重要：

function fetchData(callback) {
  const data = { name: '张三', age: 30 };
  
  setTimeout(function() {
    // 这个回调函数可以访问外部的data变量
    callback(data);
  }, 1000);
}

fetchData(function(data) {
  console.log(`姓名: ${data.name}, 年龄: ${data.age}`);
});

示例3：循环中的闭包问题

// 问题代码
function createFunctions() {
  var result = [];
  
  for (var i = 0; i < 3; i++) {
    result.push(function() {
      console.log(i);
    });
  }
  
  return result;
}

var functions = createFunctions();
functions[0](); // 3
functions[1](); // 3
functions[2](); // 3

// 解决方案1：使用IIFE创建新的执行上下文
function createFunctionsCorrected1() {
  var result = [];
  
  for (var i = 0; i < 3; i++) {
    result.push((function(j) {
      return function() {
        console.log(j);
      };
    })(i));
  }
  
  return result;
}

// 解决方案2：使用let创建块级作用域
function createFunctionsCorrected2() {
  var result = [];
  
  for (let i = 0; i < 3; i++) {
    result.push(function() {
      console.log(i);
    });
  }
  
  return result;
}

var functions1 = createFunctionsCorrected1();
functions1[0](); // 0
functions1[1](); // 1
functions1[2](); // 2

var functions2 = createFunctionsCorrected2();
functions2[0](); // 0
functions2[1](); // 1
functions2[2](); // 2

执行上下文与this绑定

在创建执行上下文时，会确定this的值。this的值取决于函数的调用方式：

// 全局上下文中的this
console.log(this); // 在浏览器中是window对象，在Node.js中是global对象

// 函数调用中的this
function showThis() {
  console.log(this);
}

showThis(); // 在非严格模式下是window对象，在严格模式下是undefined

// 方法调用中的this
const obj = {
  name: '张三',
  sayName: function() {
    console.log(this.name);
  }
};

obj.sayName(); // '张三'，this指向obj

// 构造函数中的this
function Person(name) {
  this.name = name;
}

const person = new Person('李四');
console.log(person.name); // '李四'，this指向新创建的对象

// 使用call、apply和bind显式设置this
function greet() {
  console.log(`你好，${this.name}`);
}

const user = { name: '王五' };
greet.call(user); // '你好，王五'
greet.apply(user); // '你好，王五'
const boundGreet = greet.bind(user);
boundGreet(); // '你好，王五'

// 箭头函数中的this
const arrowObj = {
  name: '赵六',
  sayName: function() {
    const arrow = () => {
      console.log(this.name);
    };
    arrow();
  }
};

arrowObj.sayName(); // '赵六'，箭头函数没有自己的this，使用外围作用域的this

执行上下文与变量环境的关系

ES6引入了let和const关键字，它们与var在执行上下文中的处理方式不同：

function varLetConst() {
  console.log(a); // undefined，var声明提升
  // console.log(b); // ReferenceError: b is not defined，let不提升
  // console.log(c); // ReferenceError: c is not defined，const不提升
  
  var a = 1;
  let b = 2;
  const c = 3;
  
  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // 3
}

varLetConst();

在上面的例子中，var声明的变量在创建阶段被添加到变量环境中并初始化为undefined，而let和const声明的变量虽然也被添加到词法环境中，但不会被初始化，因此在声明之前访问会导致引用错误（暂时性死区）。

执行上下文与块级作用域

ES6引入的块级作用域改变了JavaScript的作用域规则。从执行上下文的角度看，每当进入一个新的块（由{}包围的代码区域），就会创建一个新的词法环境来存储该块中的let和const声明：

function blockScopeExample() {
  let x = 10;
  
  if (true) {
    let x = 20; // 新的块级作用域中的x
    console.log(x); // 20
    
    const y = 30;
    console.log(y); // 30
  }
  
  console.log(x); // 10，外部作用域的x
  // console.log(y); // ReferenceError: y is not defined
}

blockScopeExample();

在上面的例子中，if块创建了一个新的词法环境，其外部环境引用指向函数的词法环境。这个新的词法环境包含了块内的x和y变量。

执行上下文与性能优化

理解执行上下文和作用域链对于编写高性能JavaScript代码至关重要：

1. 减少作用域链查找

变量查找是沿着作用域链进行的，因此访问局部变量比访问全局变量更快：

// 低效的代码
function inefficientSum() {
  let result = 0;
  for (let i = 0; i < 1000; i++) {
    result += globalValue; // 每次迭代都需要查找全局变量
  }
  return result;
}

// 优化后的代码
function efficientSum() {
  let result = 0;
  const localValue = globalValue; // 将全局变量缓存为局部变量
  for (let i = 0; i < 1000; i++) {
    result += localValue; // 访问局部变量更快
  }
  return result;
}

2. 避免不必要的闭包

闭包虽然强大，但会占用内存。应避免在循环中创建不必要的闭包：

// 低效的代码
function createFunctions1() {
  const functions = [];
  
  for (let i = 0; i < 1000; i++) {
    functions.push(function() {
      return i;
    });
  }
  
  return functions;
}

// 优化后的代码
function createFunctions2() {
  const functions = [];
  
  function createFunction(value) {
    return function() {
      return value;
    };
  }
  
  for (let i = 0; i < 1000; i++) {
    functions.push(createFunction(i));
  }
  
  return functions;
}

3. 减少执行上下文切换

频繁的函数调用会导致执行上下文栈的频繁变化，影响性能：

// 低效的代码
function sumRange1(n) {
  if (n <= 0) return 0;
  return n + sumRange1(n - 1);
}

// 优化后的代码（尾递归优化）
function sumRange2(n, accumulator = 0) {
  if (n <= 0) return accumulator;
  return sumRange2(n - 1, accumulator + n);
}

// 或者使用迭代代替递归
function sumRange3(n) {
  let sum = 0;
  for (let i = 1; i <= n; i++) {
    sum += i;
  }
  return sum;
}

执行上下文与异步编程

JavaScript的异步编程模型与执行上下文密切相关。理解事件循环、任务队列和执行上下文栈的交互对于掌握异步编程至关重要：

console.log('开始');

setTimeout(function() {
  console.log('定时器回调');
}, 0);

Promise.resolve().then(function() {
  console.log('Promise回调');
});

console.log('结束');

// 输出顺序：
// 开始
// 结束
// Promise回调
// 定时器回调

上面代码的执行过程：

全局执行上下文被创建并推入执行上下文栈
执行console.log('开始')
遇到setTimeout，将回调函数放入宏任务队列
遇到Promise.then，将回调函数放入微任务队列
执行console.log('结束')
全局代码执行完毕，检查微任务队列，执行Promise回调
当前执行栈为空，事件循环检查宏任务队列，执行定时器回调

执行上下文与模块化

JavaScript的模块系统（如ES6模块、CommonJS）也与执行上下文相关。每个模块都有自己的执行上下文：

// module1.js
export const value = 42;
export function getValue() {
  return value;
}

// module2.js
import { value, getValue } from './module1.js';

console.log(value); // 42
console.log(getValue()); // 42

在ES6模块系统中，每个模块都有自己的词法环境，模块之间通过导入和导出建立连接。

调试执行上下文和作用域链

浏览器开发者工具提供了强大的功能来调试执行上下文和作用域链：

调用栈（Call Stack）：显示当前执行上下文栈
作用域（Scope）：显示当前执行上下文的变量
断点（Breakpoints）：在代码执行的特定点暂停执行

使用这些工具可以更好地理解代码的执行过程和变量的作用域。

常见问题与解决方案

1. 变量名冲突

var x = 10;

function foo() {
  var x = 20; // 局部变量x遮蔽了全局变量x
  console.log(x); // 20
}

foo();
console.log(x); // 10

解决方案：使用不同的变量名或使用对象命名空间。

2. this指向问题

const obj = {
  name: '张三',
  sayName: function() {
    console.log(this.name);
  }
};

const sayName = obj.sayName;
sayName(); // undefined，因为this指向全局对象

解决方案：使用箭头函数、bind方法或保存this引用。

const obj = {
  name: '张三',
  sayName: function() {
    const self = this;
    setTimeout(function() {
      console.log(self.name); // '张三'
    }, 100);
  }
};

// 或者使用箭头函数
const obj2 = {
  name: '李四',
  sayName: function() {
    setTimeout(() => {
      console.log(this.name); // '李四'
    }, 100);
  }
};

3. 闭包内存泄漏

function setupHandler() {
  const element = document.getElementById('button');
  const heavyData = new Array(10000000).fill('🐘');
  
  element.addEventListener('click', function() {
    console.log(heavyData.length);
  });
}

解决方案：在不再需要时移除事件监听器或避免在闭包中引用大型数据结构。

function setupHandler() {
  const element = document.getElementById('button');
  const heavyData = new Array(10000000).fill('🐘');
  
  function clickHandler() {
    console.log(heavyData.length);
    // 使用完后移除监听器
    element.removeEventListener('click', clickHandler);
  }
  
  element.addEventListener('click', clickHandler);
}

总结

执行上下文和作用域链是JavaScript中的核心概念，它们决定了变量的访问规则和代码的执行方式：

执行上下文是JavaScript代码执行的环境，包括全局执行上下文、函数执行上下文和eval执行上下文。
执行上下文栈用于管理多个执行上下文，遵循"后进先出"的原则。
执行上下文的创建分为创建阶段和执行阶段，创建阶段包括创建词法环境、变量环境和确定this值。
作用域定义了变量的可访问性，JavaScript有全局作用域、函数作用域和块级作用域。
作用域链由当前执行上下文的词法环境及其所有外部词法环境的引用组成，用于变量查找。
闭包是函数及其引用的外部变量的组合，通过作用域链实现。
this绑定在执行上下文创建时确定，取决于函数的调用方式。
ES6特性如let/const和块级作用域改变了传统的执行上下文和作用域规则。

理解这些概念对于编写高效、可靠的JavaScript代码至关重要，也是理解更高级JavaScript概念（如闭包、模块化和异步编程）的基础。