# 04 V8底层运行机制之执行上下文及堆栈内存

By [xukai](https://paragraph.com/@xulai) · 2021-12-06

---

#### JS代码运行的环境

    + 浏览器 -> webkit内核（V8）、Trident、Gecko、Blink...
    + Node -> webkit内核
    + webview「Hybrid混合APP开发」 -> webkit内核
    + ...
    

#### 专业名词含义

    ECStack(Execute Context Stack)
    执行环境栈「栈内存」
    + 作用1：供代码执行
    + 作用2：存储原始值和变量
    
    EC(G) (Execute Context Global)
    全局执行上下文
    + 目的：区分代码执行的环境
    + 全局代码都会在全局上下文中执行
    
    VO(G) (Variable Object)
    变量对象（全局执行上下文中的变量对象）
    + 存储当前上下文中的声明的变量
    
    GO(Global Object)
    全局对象（存储浏览器内置的API）
    

#### 内存

    内存分为：栈内存Stack  堆内存Heap
    + 内存条中分配出来的运行内存
    + 前端性能优化：内存优化
    

#### \= 赋值操作

    1. 创建一个值（原始值 & 对象）
        + 原始值：在栈内存中找个位置存储起来
        + 对象：单独开辟一个堆内存空间，用来存储对象中的成员信息
    2. 声明变量 Declare，把声明的变量存储到当前上下文的”变量对象中VO/AO“（var/function/let/const/import）
    3. 让变量和创建的值关联起来
    

#### 对象类型「非函数」赋值操作

    1. 开辟一个堆内存空间「在堆内存中开辟一块单独的空间」 -> 会提供一个公访问的地址「16进制」
    2. 把对象中的键值对一次存储到空间中
    3. 把空间地址放到栈中存储，以此来供变量引用
    

* * *

#### 代码画图分析一

    var a = 12;
    var b = a;
    b = 13;
    console.log(a);
    

![](https://storage.googleapis.com/papyrus_images/074b61d67d6536ad46a7fe87d2f36f8f4db51a6dc56f715fbd58e2f66515ccf2.png)

#### 代码画图分析二

    var a = {
        n: 12
    };
    var b = a;
    b['n'] = 13;
    console.log(a.n);
    

![](https://storage.googleapis.com/papyrus_images/f002aee1489067c9412dd801434996c5956b43b8799cefec38fbe4708132c539.png)

#### 代码画图分析三

    var a = {
        n: 1
    };
    var b = a;
    a.x = a = {
        n: 2
    };
    console.log(a.x);
    console.log(b);
    

![](https://storage.googleapis.com/papyrus_images/d57373d2da68254282c027818f88b87fcd2a8f5b16cb522caa16c41ae244b6ab.png)

---

*Originally published on [xukai](https://paragraph.com/@xulai/04-v8)*