面试官:JS中变量定义时内存有什么变化?

本文最后更新于:9 个月前

目录

前言

概念

分析

进阶思考

提出猜想

证明猜想

得出结论

写在最后


前言

前段时间看面试题发现了一道比较有意思的题目

var obj = {
  num1: 117
}
var res = obj;// -----------1
obj.child = obj = { num2: 935 };// -----------2
var x = y = res.child.num2;// ----------3
console.log(obj.child);
console.log(res.num1);
console.log(y);

原题是我之前的:面试题中的Q9

其中我针对问题给出了我的看法,也借这篇文章复习一下变量对内存的操作

概念

JavaScript引擎是使用堆内存和栈内存来管理内存的:

栈内存用于存储程序的函数调用,变量声明以及一些占用小的变量值,如布尔,部分整数等,它们的生命周期受到函数的调用和退出以及变量的作用域的控制。当函数被调用或者变量创建时,相关的变量和函数调用会被压入栈内存,如果函数退出或者变量作用域销毁,相关的变量和函数就会从栈内存中弹出。

堆内存的作用是存储变量值,如字符串,对象,数组及函数,它们的生命周期受到JavaScript垃圾回收机制的控制,当不再需要这些变量时,垃圾回收机制会将它们销毁。

分析

我们以一个最简单的代码开始分析

var num = 10;
console.log(num)

上述代码中在内存发生了什么?

  1. 首先,程序创建了一个新的变量num

  2. 然后,程序分配了10给变量num。数字(小整数)是存储在栈内存中的。

  3. 然后,程序调用了console.log(num)函数,该函数从栈内存中访问变量num,并将其值打印到控制台。

  4. 最后,程序结束,栈内存被释放,因此变量num和它的值也将被删除。

短短两句代码,JS引擎竟发生如此多的操作;

那么如果我们操作字符串呢?

var str = "hello";
console.log(str)

这段代码在内存中发生了什么?

  1. 在堆上为字符串’hello’分配内存,比如地址为0x0001。

  2. 将变量str压入栈内存中,并引用0x0001,如下图
    d74d56bb82424474bc75ba5525899008.png

  3. 然后,程序调用了console.log函数,该函数从栈内存中访问变量str,并将其值打印到控制台。

  4. 最后程序结束了,栈中的变量及地址删除,堆中的0x0001在引用被释放之前一直存在的,如果没有引用,则会被垃圾回收机制销毁

了解了上述过程,我们来看点好玩的

var obj = {
    num:10
};
var obj2 = {
    num:20
};
// ----------1
obj = obj2 // ----------2
obj2.num++ // ----------3
console.log(obj)

执行上述代码,对内存有何操作?

  1. 首先堆内存分配两个空间,假定内存地址是0001和0002,二者分别在堆中是
    0x0001:{ num:10 }和0x0002:{ num:20 }
    4f760655585c44c687fa97799ffb3cd0.png
  2. 在栈中新增两个变量:obj和obj2,程序将上述两个地址分配给这两个变量,来到代码中的
    第1步,如下图
    893111ea4ee640e5a829ab57986e67e4.png
  3. 第2步,修改栈中obj的值,将它改成obj2的地址,此时obj和obj2指向同一块堆内存地址
    0f0d93bdf4794a4d944120d01e818b69.png
  4. 来到第3步,找到obj2的地址0002,使堆中这个值的num数值++,变成了21
    9e66f28e9d8f4dcab2374fd372fe2787.png
  5. 最后在控制台输出{num: 21},程序执行完成,栈中的变量清空,堆中的变量等待JavaScript垃圾回收器进行销毁

进阶思考

提出猜想

让我们回到之前那道面试题,这里我们引入了一个新的概念:连续赋值运算

var obj = {
  num: 10,
};
obj.child = obj = { num: 20 };

为了更清晰看出整个流程,我使用一个代理来监听obj的变化
代理工厂函数(监听对象读写变化)

const proxyFactory = (target, opts) => {
  return new Proxy(target, {
    set: (target, propertyKey, value, _) => {
      console.log(target, propertyKey, value);
      console.log("执行了set");
      return Reflect.set(target, propertyKey, value);
    },
    get: (target, property, _) => {
      console.log(target, property);
      console.log("执行了get");
      return Reflect.get(target, property);
    },
    ...opts,
  });
};

我们将上面的连续赋值代码放在代理中,对属性的赋值以及取值进行监听

const __proxy = {
  obj: { num: 10 },
};
var proxy = proxyFactory(__proxy);
proxy.obj.child = proxy.obj = { num: 20 };

执行上述代码,结果如下

acd0342993054801a6e1dbd566789de2.png

整句代码是先执行了读取,再进行写入

那么我们可以提出下面代码的猜想(注意:此处我们监听的是proxy.obj的读写,所以proxy.obj.child = __temp 这行代码实际上相对于 proxy.obj 是读取操作)

const __temp = { num: 20 }
proxy.obj.child = __temp;// 读取obj.child
proxy.obj = __temp;// 写入obj

证明猜想

如何证明上述猜想?

在这我们可以引入一个新的变量 obj2 用于记录 “前一个obj”,于是我们得到了下面的代码

var obj = {
  num: 10,
};
var obj2 = obj;// -----1
obj.child = obj = { num: 20 };// -----2
obj.num++;// -----3
console.log(obj, obj2);

在控制台中打印如下

2ca4d47a5e1644eead05c8956510e925.png

那么如果我们把代码换成以下代码效果是怎样的?

var obj = {
  num: 10,
};
var obj2 = obj; // -----1
var __temp = { num: 20 };
obj.child = __temp;
obj = __temp; // -----2
obj.num++; // -----3
console.log(obj, obj2);

效果和之前的一致

fbd98c932aa94399864d7bde313923ab.png

得出结论

我们针对上述代码对堆栈的操作可以做以下总结:

  1. 第1步,在堆栈中存放了两个变量,都指向0001内存
    82d90f22cede450ca7af397b5ec521df.png
  2. 第2步,分为两个步骤:1.在堆内存0001数据中的新增child属性,将其指向堆内存0002数据;2.将obj重新指向(赋值)0002
    d412283782434585b91ec28d81baf43e.png
  3. 第3步,修改obj.num,即修改了0002中的num值
  4. 最后输出结果,垃圾回收…

以上就是文章所有内容,以此记录一下这道面试题的详细分析过程

写在最后

对文章有任何问题欢迎在评论区或私信讨论

感谢你看到这里,如果你从文章中有收获,还请支持一下,谢谢!

参考文章:

JavaScript中变量存储在堆中还是栈中? - 知乎

写了10年Javascript未必全了解的连续赋值运算 - JavaScript - web - ITeye论坛