深入浅出：JavaScript 执行上下文详解

JavaScript 作为一门“解释型”语言，其运行机制与编译型语言有着显著差异，而执行上下文则是理解 JavaScript 运行原理的关键。这篇文章将带你深入浅出地理解 JavaScript 执行上下文，揭开其神秘面纱。

什么是执行上下文？

执行上下文是 JavaScript 运行时为每个函数创建的一个独立环境。它包含了函数执行所需的所有信息，包括：

• 作用域： 函数可访问的变量和函数集合。
• 变量对象： 存储函数中声明的变量和参数。
• this： 指向函数执行时当前的对象。
• 词法环境： 保存函数定义时存在的变量和函数引用。

作用域规则

JavaScript 采用词法作用域，这意味着函数的作用域由其定义时所在的代码块决定。函数可以访问它定义时的作用域以及所有外层作用域。

// 全局作用域
var globalVar = 1;

function outer() {
  // 外部作用域
  var outerVar = 2;

  function inner() {
    // 内部作用域
    var innerVar = 3;
    console.log(globalVar, outerVar, innerVar); // 输出：1 2 3
  }

  inner();
}

outer();

变量提升

JavaScript 存在变量提升的机制，在执行代码之前，所有的变量和函数声明都会被提升到作用域的顶部。这意味着变量可以在声明之前使用，但只会被赋值一次。

console.log(x); // 输出：undefined
var x = 1;

**this **

this 关键字指向函数执行时当前的对象。它通常在方法中使用，指向调用该方法的对象。在全局作用域中，this 指向 window 对象。

const obj = {
  name: 'John',
  greet() {
    console.log(`Hello, ${this.name}!`); // 输出：Hello, John!
  },
};

obj.greet();

词法环境

词法环境是存储函数定义时存在的所有变量和函数引用的集合。这意味着内层函数可以访问外层函数的变量，即使这些变量未明确传递。

function outer() {
  var x = 1;

  function inner() {
    console.log(x); // 输出：1
  }

  return inner;
}

const innerFunc = outer();
innerFunc();

总结

JavaScript 执行上下文是一个关键概念，理解它对于掌握 JavaScript 的运行机制至关重要。它包括作用域、变量对象、this 关键字和词法环境。通过理解这些概念，你可以编写出更加健壮、可维护的 JavaScript 代码。