什么是执行上下文

词法环境（Lexical Environment）

ES6 引入的概念，替代了部分 VO/AO 的功能。

结构

LexicalEnvironment = {
    EnvironmentRecord: {
        // 存储标识符
        Type: "Declarative" | "Object"
    },
    Outer: <outer environment reference>  // 指向外部环境
}

环境记录的类型

// 1. 声明式环境记录（函数、代码块）
{
    x: 10,
    y: 20
}

// 2. 对象环境记录（with语句、全局）
// 绑定到对象属性

执行上下文栈（调用栈）

概念

后进先出（LIFO）的栈结构，用于管理执行上下文。

// 示例代码
function first() {
    console.log("first");
    second();
}

function second() {
    console.log("second");
    third();
}

function third() {
    console.log("third");
}

first();

调用栈变化过程

步骤 0: 栈空
步骤 1: first() 调用
┌─────────────────┐
│ 全局上下文      │
└─────────────────┘

步骤 2: second() 调用
┌─────────────────┐
│ second() 上下文  │
├─────────────────┤
│ first() 上下文   │
├─────────────────┤
│ 全局上下文      │
└─────────────────┘

步骤 3: third() 调用
┌─────────────────┐
│ third() 上下文   │
├─────────────────┤
│ second() 上下文  │
├─────────────────┤
│ first() 上下文   │
├─────────────────┤
│ 全局上下文      │
└─────────────────┘

步骤 4: 执行完毕，依次出栈

栈溢出示例

// 递归无终止条件导致栈溢出
function infiniteRecursion() {
    infiniteRecursion(); // 不断创建新上下文
}
// infiniteRecursion(); // RangeError: Maximum call stack size exceeded

详细创建过程（变量提升机制）

console.log(a); // undefined（不是 ReferenceError!）
console.log(foo); // function
console.log(b); // ReferenceError

var a = 1;
let b = 2;

function foo() {
    console.log("foo");
}

var foo = function () {
    console.log("anonymous");
};

创建阶段顺序：

• 处理函数声明（完整提升）
• 处理变量声明（部分提升）
• 处理参数（函数上下文）

具体步骤：

// 1. 扫描函数声明
function foo() {
    console.log("foo");
}

// 2. 扫描变量声明（var）
var a = undefined;
var foo = undefined; // 函数声明已存在，但 var 会覆盖？

// 实际优先级：函数声明 > 参数 > 变量声明

函数 vs 变量声明优先级

// 示例1：函数声明优先
console.log(typeof foo); // "function"
function foo() {}
var foo = "bar";

// 示例2：同名处理
function test() {
    console.log(foo); // function
    function foo() {}
    var foo = "hello";
    console.log(foo); // "hello"
}

作用域链（Scope Chain）

作用域链是变量对象的链式结构，用于标识符解析。

var globalVar = "global";

function outer() {
    var outerVar = "outer";

    function inner() {
        var innerVar = "inner";
        console.log(innerVar); // "inner"（当前作用域）
        console.log(outerVar); // "outer"（父作用域）
        console.log(globalVar); // "global"（全局作用域）
    }

    inner();
}

outer();

作用域链创建过程

function outer() {
    // outer.[[Scope]] = [globalContext.VO]
    var a = 10;

    function inner() {
        // inner.[[Scope]] = [outerContext.AO, globalContext.VO]
        var b = 20;
        console.log(a + b);
    }

    return inner;
}

this 绑定规则

执行上下文中的 ThisBinding 根据调用方式确定：

1. 默认绑定（独立函数调用）

function showThis() {
    console.log(this); // 严格模式: undefined, 非严格: window
}
showThis();

2. 隐式绑定（方法调用）

const obj = {
    name: "John",
    sayName() {
        console.log(this.name); // "John"
    },
};
obj.sayName();

3. 显式绑定（call/apply/bind）

function greet() {
    console.log(`Hello, ${this.name}`);
}

const person = { name: "Alice" };
greet.call(person); // "Hello, Alice"

4. new 绑定（构造函数）

function Person(name) {
    this.name = name; // this 指向新创建的对象
}
const p = new Person("Bob");

5. 箭头函数（继承外层 this）

const obj = {
    name: "John",
    sayName: () => {
        console.log(this.name); // 继承定义时的 this
    },
};

闭包与执行上下文

闭包的形成

function createCounter() {
    let count = 0; // 被 inner 函数引用

    // inner 函数创建时，其 [[Scope]] 包含父级的 AO
    return function inner() {
        count++; // 访问父级 AO 中的 count
        return count;
    };
    // outer 执行完毕，但其 AO 被 inner 引用，不会被销毁
}

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

内存结构

调用栈                    堆内存
                  ┌─────────────────────┐
全局上下文         │ 闭包（Closure）     │
┌──────────────┐  │ 环境：count = 1     │
│ counter      │→│ 函数：inner()       │
└──────────────┘  └─────────────────────┘

ES6+ 的影响

1. let/const 的块级作用域

{
    let x = 10;
    var y = 20;
}
console.log(x); // ReferenceError
console.log(y); // 20

2. 块级执行上下文

// 每个 {} 块创建新的词法环境
for (let i = 0; i < 3; i++) {
    // 每次迭代都有独立的词法环境
    setTimeout(() => console.log(i)); // 0, 1, 2
}

3. 模块作用域

// module.js
let privateVar = "secret"; // 模块级作用域
export function publicFunc() {
    return privateVar;
}

调试与查看

1. 使用开发者工具

function debugExample() {
    var a = 1;
    let b = 2;
    debugger; // 在此处暂停
    const c = a + b;
    return c;
}
debugExample();

2. 查看调用栈

function trace() {
    console.trace(); // 打印调用栈
}

function a() {
    trace();
}
function b() {
    a();
}
function c() {
    b();
}
c();

性能优化建议

1. 减少执行上下文创建

// 不好的做法：循环中创建函数
for (var i = 0; i < 1000; i++) {
    setTimeout(function () {
        console.log(i);
    });
}

// 好的做法：复用函数
function logNumber(num) {
    console.log(num);
}
for (var i = 0; i < 1000; i++) {
    setTimeout(logNumber.bind(null, i));
}

2. 避免闭包滥用

// 不需要的闭包
function createFunctions() {
    var result = [];
    for (var i = 0; i < 100; i++) {
        result.push(function () {
            return i; // 所有函数共享同一个 i
        });
    }
    return result;
}

3. 使用块级作用域

// 限制变量生命周期
{
    let temp = computeExpensiveValue();
    useValue(temp);
}
// temp 在此处不可访问，可被垃圾回收

常见面试题

1. 变量提升

console.log(a); // ?
var a = 1;
let b = 2;

2. 作用域链

var x = 10;
function foo() {
    console.log(x); // ?
    var x = 20;
}
foo();

3. this 绑定

const obj = {
    name: "John",
    greet: function () {
        console.log(this.name);
    },
    arrowGreet: () => {
        console.log(this.name);
    },
};
obj.greet(); // ?
obj.arrowGreet(); // ?

理解执行上下文是掌握 JavaScript 核心机制的关键，涉及：

• 作用域
• 闭包
• this 指向
• 变量提升
• 内存管理