你有没想过为什么同一个函数每次被调用时douNeng得到完全不同的执行环境？

说实话，JS的执行上下文可不是你想象中的那种静态舞台，而是一个动态拼装的剧场。

1️⃣ 执行上下文是什么？

它其实就是 JavaScript 引擎在运行代码时创建的一块内存空间，里面存着所有可见的变量、函数和 this 的指向。

Ke以把它想象成一次演出前的彩排：先搭好舞台，再把演员放上去，然后开始表演。

而这块舞台并不会一直存在——每当你调用一个函数，它就会再来一次新的彩排。

全局执行上下文

当你打开页面浏览器就会先跑一遍全局代码，创建一个全局执行上下文。

这个上下文里的 this 指向 window，而 VO则保存所有全局声明的变量与函数。

函数执行上下文

当 JS 引擎遇到函数调用时就会在栈顶再推入一个新的执行上下文。

A 函数里有 B，B 调用时又会推入自己的上下文。如此往复，就形成了我们常说的“调用栈”。

2️⃣ 执行过程：从创建到销毁

a) 初始化阶段：解析参数、声明提升，把所有声明放进 VO； b) 代码执行阶段：按顺序跑每条语句； c) 结束后销毁：把当前上下文弹出栈顶。

"我知道，你可Neng在想，这跟编译有什么关系？"

"别急，我给你举个例子，让你直观地kan到栈怎么变化。"

var foo = 'global';
function bar {
    console.log;   // 第一步
    if  {
        var foo = 'inside';
    }
    console.log;   // 第二步
}
bar;

输出：

undefined
inside

"kan吧，当 bar 被调用时它自己的 VO 并没有立即拿到外层 foo 的值——因为 var foo 在内部声明，先被提升为

"那全局作用域呢？"

function outer {
    console.log;
    function inner {
        console.log;
        console.log; // 在非严格模式下 this 是 window
        console.log;
    }
    inner;
    console.log;
}
outer;

"这里 inner 的 this 指向的是 global object，因为我们没有用箭头函数或 bind，这也正是默认行为。"

3️⃣ 声明提升与重写规则

var：

var a = 1;
function a {}
console.log; // 打印的是 function，而不是数字 1

let / const：

let b = 2;
function b {}
console.log; // 报错 ReferenceError，因为 let 不会被提升

"不对不对，应该是 let 会报错，因为它在 Temporal Dead Zone里。"

"这玩意儿真的hen容易搞混！"

/* 冒泡排序 */
function bubble {
    var len = arr.length;
    for  {
        for  {
            if  { /* swap */ }
        }
    }
}
bubble;

"这里 var 的提升让循环变量 i 与 j 在整个 bubble 函数内部dou可见，即使它们在 for 循环里定义。"

4️⃣ this 的三种指向方式

全局环境下 this 指向 global 对象； 普通函数调用中 this 指向 global； 构造函数中 this 指向新建对象。 箭头函数继承外层 this。

// 构造器例子
function Person{
   this.name=name;
}
var p=new Person;
console.log; // Alice
// 普通调用
function test{
   console.log;
}
test; // window
// 箭头函数不会改变 this
const arrow =  => { console.log; };
arrow; // 同样是 window，在此处没有绑定其他对象
// bind / call / apply 用来手动指定 this
const obj={x:42};
test.call; // obj 
test.apply; 
test.bind; 

"嘿，你是不是以为 all functions douKe以改变这个指针？" 5️⃣ 执行上下文栈的完整流程示例

'咱就是说一个典型的多层嵌套过程：' ① 全局 → A → B → C → 返回 → B → 返回 → A → 返回。 '每一次返回，dou像是撤掉刚才铺好的舞台板块。' '而且，全局Zui后才消失，那就是页面关闭的时候才彻底清空内存。' '说实话，一旦掌握了这点，你就Neng轻松定位hen多 “this” bug 和闭包泄漏问题。' '

global   ← push
A      ← push
B      ← push
C      ← push
C exit← pop
B exit← pop
A exit← pop
global exit← pop

"要记住每一次 push 就相当于加了一个新的舞台板块，而 pop 就拆掉那个板块。" 6️⃣ 常见陷阱 & 小技巧 👀

'闭包忘记释放导致内存泄漏——尤其是在大量异步回调里。'

'使用 let/const 时一定要注意 TDZ ——不要在定义前访问！'

'严格模式下this 在普通函数里为 undefined ——防止无意中访问全局对象。'

'所以一下：'

'每个执行上下文dou有自己的 VO，用来存储变量、参数和内部声明。'

'this 是根据调用方式决定的——构造器、普通调用、箭头函 等等。'

'声明提升让 var kan起来像是提前出现，但 let/const 却不这么Zuo，会产生 TDZ 问题。'

"

'理解了这些，你就Neng写出geng健壮、geng易维护的 JavaScript 代码啦！' ' — – – – – – – – – – – – –

---