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

文章目录 一、内存的认识1.栈2.堆 二、上下文1. 这么瞧一下2. 全局执行上下文3. 函数执行上下文4. 执行栈5.栈帧 三、总结

---

一、内存的认识 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).

5.栈帧

栈帧: 一个函数调用单独分配的那部分栈空间,函数调用一次就分配一个.

运行的程序从当前函数调用另外一个函数时，就会为下一个函数建立一个新的栈帧，并且进入这个栈帧，这个栈帧称为当前帧。

而原来的函数也有一个对应的栈帧，被称为调用帧。每一个栈帧里面都会保存函数的执行上下文.

当函数被调用时，就会被加入到调用栈顶部，执行结束之后，就会从调用栈顶部移除该函数。并将程序运行权利（帧指针）交给此时栈顶的栈帧。这种后进后出的结构也就是函数的调用栈。

---

三、总结 上下文表示的代码执行的环境,如函数上下文,提前确定好函数的变量对象以及this指向等.在函数代码真正执行的时候,不用再去处理这些问题,加快运行的速度.

别跑,据说给我一键三联的人写代码都没Bug! 您的支持就是我最大的动力!

我是飞翔,
愿您日有所长