js代码在内存中的执行过程

95 阅读1分钟

先来看一段js代码:

function foo(count) {
    function bar(num) {
        return count + num;
    }
    return bar;
}

var goo = foo(10);
goo(100);

代码看着简单,但是js引擎在执行js的过程中,做的事情就比较复杂了,我们知道,js代码在执行之前,js引擎会进行词法分析和语法分析,在经过词法分析和语法分析之后,该代码在内存中是这样的:

Snipaste_2022-08-02_10-31-39.jpg

此时,代码还没有开始执行。接下来就是代码在栈里面执行,当遇到执行函数foo(10)的时候,会在栈里面创建函数执行上下文,执行之后,会在对应的堆内存里面记录执行的结果。

Snipaste_2022-08-02_10-44-12.jpg

接下来,是把foo(10)函数的10赋值给foo函数的形参count,执行完foo(10)后,会把foo函数的执行上下文弹出栈,然后把foo(10)返回的函数bar地址赋值给goo变量。

Snipaste_2022-08-02_10-54-08.jpg

接下来是执行函数goo(100),执行的时候,先创建goo的函数执行上下文,并对bar函数内部进行解析。

Snipaste_2022-08-02_10-58-45.jpg

解析完bar函数,开始执行,把100赋值给num变量,然后去自己(goo)函数的执行上下文找count变量,并没有找到,于是去自己的scope chain对象里面去找,此时scope chain对象就是bar函数对象的scope列表,在foo的AO对象里面找到count变量,然后执行代码,返回结果。

Snipaste_2022-08-02_11-00-05.jpg