理解执行上下文

237 阅读4分钟

要想较为深入地了解JavaScript,理解执行上下文是必不可少的步骤,那么,什么是执行上下文?

执行上下文可以理解为js代码的运行环境,js代码运行时一定会进入相对应的执行上下文之中。

了解执行上下文

分类

js代码可以分为全局代码局部代码,与之相对应的就是全局执行上下文局部执行上下文

全局执行上下文,顾名思义,即打开某一页面时默认进入的执行上下文,全局执行上下文在一个页面中只有一个。

局部执行上下文,也叫函数执行上下文,即js代码运行进入某一个函数时所处的执行上下文,一个页面可有多个。

eval函数执行上下文,目前已基本不会使用,不再赘述。

执行上下文运作方式

为了理解执行上下文的运作方式,用一段简单的代码来做说明。

    let a=2;
    let b=3;
    let c=1;
    function f(a,b,c){
        console.log(a+b+c);
    }
    f(a,b,c);

在chrome浏览器中对该程序做调试:

页面开始运行,此时进入全局执行上下文

代码继续向下执行,当进入f函数体之后:

可以清晰的看到,此时进入名为f的局部可执行上下文

通过这个栗子,相信读者已经对执行上下文的运作方式有了自己的理解,值得一提的是,

局部执行上下文可以在一个页面内存在多个

如果我们多个函数有嵌套声明调用的情况,就会出现多个局部执行上下文

    function f(){
        function g(){
            console.log("执行");
        }
        g()
    }
    f();

执行上下文的组成部分

局部执行上下文有以下几个部分组成:

  • 函数内部定义的变量,
  • arguments,
  • 函数内部定义的函数
  • 函数的父级函数的执行上下文(如果函数没有父级函数,那它的父级就是全局执行上下文)

全局上下文的组成部分:

  • 全局代码定义的变量,
  • 全局代码定义的函数

由组成部分就可以推测出:执行上下文为代码运行提供数据

执行上下文运作过程

通过上面两个部分,读者应该对执行上下文有了初步理解,在本章节,笔者会用栗子对执行上下文的运作过程(执行上下文栈)做简要解读。

在开始这一部分之前,我们要先对有所了解,可以把栈理解为一种线性的容器,类似茶杯。

假设我们做如下动作:

  • 1.向茶杯里装一个乒乓球

  • 2.再向茶杯里装第二个乒乓球

  • 3.向茶杯中装第三个乒乓球

现在我们有一个装了三个乒乓去的茶杯

那么如果要取出乒乓球,应该按什么顺序呢?

没错,我们会按照3号->2号->1号的次序取出,如果能理解这个“乒乓球模型”,那么恭喜你,你已经明白了栈的重要特点:即后进先出

OK,可以正式开始了

还是上面的代码:

    function f(){
        function g(){
            console.log("执行");
        }
        g()
    }
    f();

页面跑起来!

  1. 全局代码执行,产生一个全局执行上下文。
  2. 调用函数f()产生一个f函数执行上下文。f函数执行上下文会放在全局执行上下文的上面。
  3. 调用函数g()产生一个g函数执行上下文。g函数执行上下文会放在f函数执行上下文的上面。

当函数调用完成时,它们会按照相反的入栈顺序去出栈。

One More Thing~

既=既然我们已经初步了解了执行上下文,那么对js的运作原理便也可管中窥豹、可见一斑,那么,可以用执行上下文来解释为什么函数内的变量,在函数的外部无法访问吗?

上文有所提及,执行上下文为代码运行提供数据,函数定义的变量会存在于函数执行上下文中,在函数外调用该变量时,其所对应的执行上下文无法为其提供这个变量,所以自然就无法访问。

结束

理解执行上下文是深入学习js的必要步骤,希望能有所帮助。