JS 执行上下文

先看个小例子

function fn(){
     console.log(a);//undefined;
     var a = 1;
}
fn();

为什么打印出来的是 undefined 呢？

 

执行上下文概念

　　当代码运行时，会产生一个对应的执行环境，在这个环境中，所有变量会被事先提出来（变量提升），有的直接赋值，有的为默认值 undefined，代码从上往下开始执行，就叫做执行上下文。

 　　在 JavaScript 的世界里，运行环境有三种，分别是：

　　　　1.全局环境：代码首先进入的环境

　　　　2.函数环境：函数被调用时执行的环境

　　　　3.eval函数：https://www.cnblogs.com/chaoguo1234/p/5384745.html（不常用）

 

 

执行上下文特点

　　1.单线程，在主进程上运行

　　2.同步执行，从上往下按顺序执行

　　3.全局上下文只有一个，浏览器关闭时会被弹出栈

　　4.函数的执行上下文没有数目限制

　　5.函数每被调用一次，都会产生一个新的执行上下文环境

 

 

执行上下文栈

　　执行全局代码时，会产生一个执行上下文环境，每次调用函数都又会产生执行上下文环境。当函数调用完成时，这个上下文环境以及其中的数据都会被消除，再重新回到全局上下文环境。处于活动状态的执行上下文环境只有一个。

　　其实这是一个压栈出栈的过程——执行上下文栈。

　　

　　

　　

var                                  // 1.进入全局上下文环境
    a = 10,
    fn,
    bar = function(x){
        var b = 20;
        fn(x + b);               // 3.进入fn上下文环境
    }

fn = function(y){
    var c = 20;
    console.log(y + c);    
}

bar(5);                              // 2.进入bar上下文环境

 

 

 

 

执行上下文生命周期

　　

　　如图所示，执行上下文共分3个阶段，分别是：

　　　　1.创建阶段

　　　　　　(1).生成变量对象

　　　　　　(2).建立作用域链

　　　　　　(3).确定 this 指向

 

　　　　2.执行阶段

　　　　　　(1).变量赋值

　　　　　　(2).函数引用

　　　　　　(3).执行其他代码

 

　　　　3.销毁阶段

　　　　　　执行完毕出栈，等待回收被销毁

 

　　所以上面小例子等同于：

　　

function fn(){
    var a;
    console.log(a);
    a = 1;    
}

fn();

 

随笔整理自 

https://www.cnblogs.com/mcray/p/7003245.html?utm_source=itdadao&utm_medium=referral

https://www.cnblogs.com/wangfupeng1988/p/3989357.html

感谢博主分享！

来源：https://www.cnblogs.com/gaosirs/p/10569973.html