JS变量的内存分配你了解多少？

悠悠 2021-09-02 04:11 483阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70_pic_center]

> 美国导演昆汀·塔伦蒂诺说：世界上80%的故事都已经拍过了。所以我们要用新方法去拍老故事。

`JavaScript`的所有变量（包括函数）在整个处理过程中都是存放在内存中，所以要对一个变量进行处理。首先得为变量分配内存。`JavaScript`内存分配和其他语言一样，是根据变量的数据类型来分配内存的，而`JavaScript`变量的数据类型由所赋的值的类型所决定的。`JavaScript`支持的数据类型可分为两大类：基本数据类型和复杂数据类型。其中基本数据类型包含了数字（`number`）类型、字符串（`string`）类型、布尔（`boolean`）类型、未定义（`undefined`）类型、空（`null`）类型；复杂类型包含了对象（`object`）类型，在`JavaScript`中数组、函数都属于对象类型。除了基本数据类型以外的数据类型全都是对象类型。在`JavaScript`中，基本数据类型变量分配在栈内存中，其中存放了变量的值，对其是按值访问的；而对象类型的变量则同时会分配栈内存和堆内存，其中栈内存存放的是地址。堆内存存放的是引用的值，栈内存存放的地址指向堆内存存放的值。对该变量的访问是按引用来访问的，即首先读取到栈内存存放的地址，然后按地址找到堆内存读取其中的值。

`JavaScript`之所以按变量的不同数据类型来分配内存，主要原因是栈内存比堆内存小，而且栈内存的大小是固定的，而堆内存大小可以动态变化。基本数据类型的值的大小固定，对象类型的值大小不固定，所以将它们分别存放在栈内存和堆内存是合理的。

function Student (id,sno,name,age){  //函数定义，Student是一个函数变量
       this.id = id;
       this.sno = sno;
       this.name = name;
       this.age = age;
    }
    var num = 20; //num 是一个数字变量
    var bol = false; //bol 是一个布尔变量
    var str = "student"; //str 是一个字符串变量
    var obj = { }; //obj是一个对象变量
    var arr = ['a','b']; //arr是一个数组变量 
    var student = new Studenta(1,"199706010016","maomin",23); //student是一个对象变量

上述代码中的`Student`变量定义了一个构造函数，函数的定义代码存放在堆内存中，该内存对应的地址存放在`Student`函数变量中。构造函数用于创建对象实例，最后一行代码正是使用了该构造函数来创建了一个名字叫`maomin`的学生对象实例。学生实例创建完后会返回其在堆内存中分配的地址，该地址被赋给了`student`变量。

上述代码中的`{}`在堆内存中创建了一个空对象，该对象的堆内存中的地址被赋给了`obj`的变量。`['a','b']`是一个元素值分别为`'a'`,`'b'`的数组对象，该对象也在堆内存中存放，其对应的地址赋给了`arr`变量。除了`Student`、`obj`、`arr`和`student`这几个变量为对象变量外，其他几个变量`num`、`bol`、`str`都是基本数据类型的变量，因而它们都存在栈内存中。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70_pic_center 1]

基本数据类型的变量值存储在栈内存，而对象类型变量，包括函数、数组和对象，在栈内存中存储的只是引用对象的地址，该地址为对象在堆内存分配的地址，因而通过该地址可以找到对象类型的变量值

--------------------

> 欢迎关注我的公众号「**前端历劫之路**」  
>   
> 回复关键词**电子书**，即可获取近12本前端热门电子书。  
>   
> 回复关键词**红宝书第4版**，即可获取最新《JavaScript高级程序设计》（第四版）电子书。  
>   
> 你还可以加我微信，我拉拢了很多IT大佬，创建了一个技术交流、文章分享群，欢迎你的加入。  
> 
> 
>  *  作者：**Vam的金豆之路**
>  *  主要领域：**前端开发**
>  *  我的微信：**maomin9761**
>  *  微信公众号：**前端历劫之路**
> 
> ![Image 1][]

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/e95b3df7444542d1a2c96abab97754ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210813/374b13293e4d45ea8f2aba82dc0ba01a.png
[Image 1]: