胖蔡说技术
随便扯扯

JS中如何理解执行上下文?

执行上下文是JS中一个比较重要的概念,当前函数、变量所处的执行上下文直接决定当前变量、对象可访问哪些数据。一般地,根据执行区域可以将执行上下文分为两种类型:

  • 全局执行上下文
  • 函数执行上下文
执行上下文

全局执行上下文

一般地,全局执行上下文是最外层的执行上下文,总在执行栈底部,我们可以理解为window对象作为一个全局执行上下文的对象。因此,所有通过var定义的全局变量和函数都可以通过window访问对应的属性和方法。全局执行上下文在一个页面打开自动的时候创建,直到这个页面关闭后全局执行上下文会被回收。

函数执行上下文

如上,在JS中执行是按顺序执行的,JS启动的时候会创建一个执行上下文的一个栈结构,并同时创建一个全局执行上下文压在栈底,然后按顺序执行。这时候,若是遇到需要执行一个函数的话,JS就会创建一个对应的函数执行上下文入栈,并在该函数执行结束后,将该函数执行上下文出栈。

var a=1;//1.进入全局执行上下文环境
function outter(){
  var b=2;
  function inner(){
    var c=3;
    console.log(a+b+c);
  }
  inner();//3.进入inner函数上下文环境
}
outter();//2.进入outter函数上下文环境

上述代码,是比较常见介绍执行上下文的代码。如上所示,开始执行JS时,会创建全局执行上下文,然后运行到outter()函数将触发创建函数执行上下文环境,在outter内部又会创建一个子函数执行上下文inner(),我们简单的梳理下上下文创建、销毁的流程:

  1. 打开页面,运行JS代码时创建全局执行上下文环境
  2. 调用outter()函数,创建outter()函数执行上下文环境
  3. 运行执行outter函数,调用内部函数inner()函数,创建inner()函数执行上下文环境
  4. inner()函数执行完毕,销毁inner函数执行上下文环境
  5. outter()函数执行完毕,销毁outter函数执行上下文环境
  6. 关闭当前页面,销毁全局执行上下文环境

执行上下文组成

执行上下文环境一般的由变量环境和词法环境组成。变量环境可以理解为我们的全局变量、全局函数,或者是函数执行上下文里的函数变量部分。词法环境主要就是js代码执行的调用链即代码作用域。

赞(2) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » JS中如何理解执行上下文?
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏