结合代码谈JS调用执行上下文

团子yaa
167 阅读3分钟

前言

当在代码执行阶段执行到一个函数的时候，就会进行准备工作，这里的“准备工作”，就叫做"执行上下文(EC)"，也叫执行上下文环境，也叫执行环境。

JavaScript的执行过程

  • 编译：由JavaScript编译器对代码进行编译，将代码翻译成可执行代码
  • 执行：由JavaScript引擎执行可执行代码

可执行代码有：

  • 全局代码（Global Code）：代码首次执行时候的默认环境
  • 函数代码（Function Code）：每当执行流程进入到一个函数体内部的时候
  • Eval代码（Eval Code）：当eval函数内部的文本执行的时候

红框内的即为全局上下文GO（Global Context），黄色，蓝色框内即不同的函数上下文(Function Context)

调用执行上下文过程

当浏览器第一次加载代码时，首先它会进入到一个全局执行上下文（GO）中。如果在你的全局代码中，你调用了一个函数，那么程序的执行流程会进入到被调用的函数中，并创建一个新的执行上下文（AO），并将这个上下文推入到执行栈顶。创建完成之后，就会开始执行代码，这个时候，会完成变量赋值，函数引用，以及执行其他代码。

结合代码来分析下执行上下文

GO中没有变量声明时

function test(a) {
    console.log(a);//funtion a()
    var a = 1
    console.log(a)//1
    function a() { }
    console.log(a)//1
    var b = function () { }
    console.log(b)//function (){}
}
test(2)

// AO={
//     a:undefied->function a(){}->1
//     b:undefied->undefied->function(){}
// }

该函数的执行过程如下：

  • 1.创建a参数,引用指向(2)
  • 2.创建变量a，初始值undefined
  • 3.创建函数function a(){}，与变量a同名，覆盖变量a的值undefied,变量a的值修改为function a(){}
  • 4.创建变量b，初始值undefied
  • 5.执行console.log(a) 打印结果 function a(){}
  • 6.赋值a=1 打印结果 1
  • 7.再次打印 a不变 打印结果 1
  • 8.b赋值function(){}
  • 9.打印b 打印结果 function(){}

GO中有变量声明时

var b = 3
console.log(a)//a(){...}
function a(a) {
    console.log(a)//a(){}
    var a = 2
    console.log(a)//2
    function a() {}
    console.log(c)//4
}
var c = 4
a(1)
GO={
    b:undefied->3
    a:function a(a){...}
    c:undefied->4
}
AO={
    a:undefied->function a(){}->2
}

该函数的执行过程如下：

  • 一、全局上下文（GO）
  • 1.创建变量b，初始值undefied
  • 2.创建函数function a(a){...}
  • 3.创建变量c
  • 4.赋值变量b=3
  • 5.打印变量a 打印结果a function a(a){...}
  • 6.赋值变量c=4
  • 7.执行函数a(1)
  • 二、函数上下文（AO）
  • 1.创建a参数，引用指向（1）
  • 2.创建变量a，初始值undefined
  • 3.创建函数function a(){}与变量a同名，覆盖变量a的值undefied,变量a的值修改为function a(){}
  • 4.执行console.log(a) 打印a的值为function a(){}
  • 5.赋值变量a=2,变量a的值修改为2
  • 6.执行console.log(a) 打印a的值为2
  • 7.执行console.log(c) 该上下文中没有c的值，去全局上下文中 找到c的值为4 打印值为4
avatar
文章
阅读
粉丝