执行环境(上下文)

1. 栈的数据结构

   
   Snip20181105_9.png
2. 函数的执行环境(上下文)Execution Context

• js执行在单线程上，所有的代码都是排队执行；
• 一开始浏览器执行全局的代码时，首先创建全局的执行上下文，并把它压入执行环境栈(ecs)的顶部；
• 每个函数执行之前会创建一个执行上下文，然后把它压入执行环境栈的顶部，当前函数执行完成以后，出栈，等待垃圾回收；
• js执行引擎总是访问栈顶的上下文；
• 全局上下文只有一个，它在关闭浏览器的时候出栈。

执行环境栈的原理图
代码执行环境栈的演示图

        //代码执行之前的的时候，就会立即创建一个全局的执行上下文，Global Excution Context
        //创建完全局上下文以后，把全局上下文压入执行环境栈底
        function f1(){
            console.log('f1');
        }
        function f2(){            
            console.log('f2');
            f3();
        }
        function f3(){            
            console.log('f3');
            f4();
        }    
        function f4(){
            console.log('f4');
        }

        f1();  //代码进入了f1()函数，函数内的代码在执行之前
               //js执行引擎立即创建一个f1的执行环境(f1 ec)
               //立即把这个环境执行环境栈ecs中

        //f1函数执行完成以后，从执行环境中弹出f1的执行上下文

        //f2函数执行之前，创建f2的执行上下文压入到执行环境栈(ecs)中
        f2(); //f2()里调用了f3(),f3()里调用了f4()       
        //因为f2调用了f3
        //f3函数执行之前也创建了一个f3的执行上下文，并压入到ecs中
        //f3函数调用了f4函数，所以创建f4的ec，并把的ec压入ecs中.

        //f4执行完成后，f4的ec出栈
        //f3执行完成后，f3的ec出栈
        //f2执行完成后，f2的ec出栈


        //压入顺序f2->f3->f4
        //弹出顺序f4->f3->f2

Snip20181105_13.png