js中的上下文,好比煮一顿泡面

原创已于 2023-05-11 19:09:38 修改 · 189 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2023-05-11 18:55:11 首次发布

文章介绍了JavaScript中内存的两种类型——栈和堆，栈遵循LIFO原则，而堆存储引用数据类型。执行上下文是JS代码运行的环境，分为全局和函数执行上下文，每次函数调用都会创建新的执行上下文。执行栈管理这些上下文的执行顺序，而栈帧则代表每个函数调用的独立栈空间。

一、内存的认识

1.栈

栈遵循"先进后出，后进先出"的规则，或称LIFO (“Last In First Out”) 规则。

如图所示，我们只能从栈顶取出或放入乒乓球，最先放进盒子的总是最后才能取出。
栈中"放入/取出"，也可称为"入栈/出栈"。
栈数据结构的特点：
1 后进先出，先进后出
2 出口在顶部，且仅有一个

2.堆

JS的引用数据类型(Array,Object),值的大小是不固定的,它们都保存在堆内存中。
JS不允许直接访问堆内存，因此堆内存空间中的对象我们也不能直接操作。
引用类型的值都是按引用访问的。这里的引用就是保存在栈内存中的一个地址，该地址与堆内存的实际值相关联.

二、上下文

如果我们想煮一碗泡面,应该怎么样?
肯定是提前准备好泡面,鸡蛋,青菜,等想吃的时候直接下锅煮就行.
而这里的执行上下文就相当于准备好煮泡面的材料,只为煮的时候更加方便.

1. 这么瞧一下

js是单线程的,每当遇到可执行代码时,就会生成执行上下文. 执行上下文用于描述运行js的环境。
当调用函数时，在执行函数体之前的几ms中，JS引擎会创建一个局部的执行上下文。
上下文决定了他们可以访问哪些数据,以及他们的行为.
上下文在其所有代码执行完毕后会被销毁,包含所有的变量和函数.
全局上下文,在推出程序前才被销毁(如关闭浏览器或推出程序).
js中的执行上下文,分为三种.

1 全局环境,整个js运行起来就进入的环境.
2 局部环境,进入局部函数内.
3 eval() 不在被使用.

执行上下文就像我们要煮泡面,提前备好方便面,青菜,鸡蛋啥的.想吃的时候,直接下锅.
而不是想吃的时候再去买,那也能做好,但是速度很慢吧…

2. 全局执行上下文

全局上下文是最外层的上下文.
对全局的变量进行处理.
a, 将var声明的全局变,添加给 window做属性.
b, function 声明的全局变量,给window做方法.
c, 给this赋值为window

全局上下文只有唯一的一个，它在浏览器关闭时出栈。
补充一点
a, 全局环境是最外围的环境，根据ECMAScript实现所在的宿主环境不同，表示执行环境的对象也不一样。
b, 在web浏览器中，全局执行环境被认为是window对象，因此所有的全局变量和函数都是作为window对象的属性和方法创建的。
c, 在es6中存在块级作用域.所以let，const，class声明的全局变量不属于全局对象，即window的属性。var和function声明的变量和函数属于全局对象的属性.
3. 函数执行上下文
在执行函数前的几毫秒中,创建函数的执行上下文(存于执行栈中).
形成上下文时,需要干这么几件事.
a, 将实参赋值给形参,且将形参添加到执行上下文属性中.
b, arguments赋值(实参列表),添加到执行上下文的属性.
c, var定义的局部变量,不赋值,添加到执行上下文的属性.
d, function 声明的函数,添加到执行上下文的方法.
e, this赋值为调用函数的对象.
每个上下文中都有变量对象,上下文中的变量和函数,都存储于这个对象上.
上下文的代码执行时,会创建变量对象的作用域链,主要决定各级上下文代码访问变量和函数时的顺序.
代码正在执行的上下文变量对象,始终位于作用域链的最顶端.

1 函数执行上下文被推入函数调用栈中，在函数执行完毕后从栈顶推出。控制权交还给之前的执行上下文。

4. 执行栈

执行栈即执行上下文栈,用于存储代码执行期间创建的所有执行上下文,也就是需要执行的代码。

JavaScript执行在单线程上，所有的代码都是排队执行。
一开始浏览器执行全局的代码时，首先创建全局的执行上下文，压入执行栈的顶部。
每当进入一个函数的执行就会创建函数的执行上下文，并且把它压入执行栈的顶部。当前函数执行完成后，当前函数的执行上下文出栈，并等待垃圾回收。
浏览器的 JS 执行引擎总是访问栈顶的执行上下文。

function fn1(){
    fn2()
}
function fn2(){
   fn3()
}
function fn3(){
   // 用于显示当前执行的代码在堆栈中的调用路径。
    console.trace()
}
fn1()
// 执行结果
01-test.html:20 console.trace
fn3 @ 01-test.html:20
fn2 @ 01-test.html:17
fn1 @ 01-test.html:14
(anonymous) @ 01-test.html:22

结果明确的显示,最后调用的fn3() 反倒是最先完成的.这也及时栈的特点.后进先出LIFO(last in first out).