JS进阶系列-JS执行期上下文(一)

764 阅读14分钟

点赞再看,年薪百万 本文已收录至github.com/likekk/-Blo…欢迎大家star😘😘😘,共同进步。如果文章有出现错误的地方,欢迎大家指出。后期将在将GitHub上规划前端学习的路线和资源分享。

前言

距离写上一篇文章已经过去两个月了(上一篇文章是2020年07月17日写的),托更有点严重,一方面是这几个月项目在赶,另一方面是自己近两个月以来变懒了(为自己不想更新文章找借口)😅😅😅,国庆假期,公司放八天假。

自己没有去回家,主要是回家有点远,从来这边读书到现在的国庆期间一直都没有回过家,这七八天本来也打算出去玩的(肯定需要安排时间出去玩),但是想想还是学点东西比较好。于是有了这篇博客。

写预编译(执行期上下文)这篇博客的初衷是因为一方面方便自己复习,另一方面是为了后续出闭包、作用域和作用域链、this指向等等的博客做一些前期的准备,以上几个知识点可以说是在基础中比较难以掌握的,也有可能会在一些面试中经常会问到的。

正文

首先在讲解预编译之前,我们先说下JavaScript的语言特点吧!说两点比较重要的(比较优秀的两点)

我们知道JavaScript语言首先是单线程的,其次是解释性语言。对于这两点我相信大家都不陌生,接着我们拓展开来,对于解释执行只是发生在执行的最后一步,解释执行之前还有两步,简单介绍一下JavaScript运行三部曲

  • 语法分析
  • 预编译(全局预编译阶段【创建GO对象】和函数预编译阶段【AO】)
  • 解释执行

语法分析:

对于语法分析的话,大概过一下就可以了,比如:是否少写个括号,是否有中文等等一系列的问题。JavaScript解释器会全篇扫描一下,检查是否有错误,但是不会执行。

预编译:

这个就比较有意思了,也是本篇博客的重点,预编译的话主要分两种吧!一种是函数体里面的预编译(AO),另一种是全局环境的预编译(GO),不懂?没有关系,我会慢慢讲到。

解释执行:

对于解释执行执行的话,我想我也可以不用多说吧!就是在执行的时候解释一行执行一行呗!

对于预编译这个概念其实我们有遇到过,只是我们不知道它的专业名词叫做预编译

纳尼?不信我,好吧!我们看下是否遇到过,先简单举个例子来证明一下我的观点

test();
function test(){
    console.log('a');
}
console.log(a);
var a=123;

提问:输出什么?

答案: a 和 undefined

相信大家都可以做出来,其实这里面就已经包含预编译的阶段,最开始讲的时候就说了,预编译发生在函数执行的前一刻,所以在函数调用的时候就已经有预编译这一个阶段了。

好的,我们再来看下另外一个示例

test();
function test(){
	console.log('a');
}
test();
console.log(a);
var a=123;

答案: a 、 a 和 undefined

对于如此简单的两道题目,相信在座的各位没有做不出来的吧!

路人甲:“杨戬哥,这两道题目好简单(Low)呀!”

杨戬:”是,是很简单,但是你们知道是什么原理吗?为什么第一题中输出a和undefined,对于a的话相信大家都知道,但是undefined输出是为什么?大家是否有考虑过。“

路人乙:”杨戬哥,我们老师讲过两句比较有用的话“

函数声明,整体提升

变量 声明提升

路人丙:”这两句话可以解决很多问题,我在碰到一些问题的时候,就是套用这两句话。“

杨戬:”路人丙弟弟,你的这两句话确实可以解决很多问题,但是有些问题靠这两句话是解决不了的“

路人丙:”杨戬哥,我不信“

杨戬:”好吧!,既然你不信,那我就出道题考考你。“

路人丙:”come on“

function foo(a){
	console.log(a);
	var a=123;
	console.log(a);
	function a(){}
	console.log(a);
	var b=function(){}
	console.log(b);
	function d(){}
}
foo(1);

杨戬:”提问console.log()都输出是什么?“

路人丙:”这、这、这,还有这操作“

路人丙:”算了,我还是老老实实听杨戬讲吧!,不装逼了“

我先公布以下答案吧!

答案:function a(){}、123、123、function(){}

但是到这里我还是没有那么快讲解预编译,考虑了一下,讲解之前还是需要铺垫一点东西,否则很难讲清楚。

预编译前期

预编译前期主要讲解两个东西

1、imply global 暗示全局变量,即任何变量,如果变量未经声明就赋值,此变量就为全局对象所有

2、一切声明的全局变量都是window属性

例一

var a=123;
console.log(a);
function test(){
    var a=b=123;
}
test();
console.log(window.a);
console.log(window.b);

依次输出undefined、123

看第一条,即任何变量,如果变量未经声明就赋值,此变量就为全局对象所有

a变量我们是已经声明了,但是b变量我们并没有声明,此时就进行赋值,所以归全局对象所有

例二

 	var b=123;
	console.log(b);
    console.log(window.b);

此时b===window.b

第二条,一切声明的全局变量都是window属性

讲解的不是那么透彻,等讲完全局预编译的时候再回过头来看,你就会有一种醍醐灌顶的感觉

预编译(执行期上下文)

预编译在这里我主要分两种,一种是函数预编译(函数执行期上下文)和全局预编译(全局执行期上下文)

函数预编译(函数执行期上下文)

函数预编译我给大家总结了四条规律,无论什么样的,都能够正确的避坑

  • 创建AO对象
  • 找形参和变量声明,将变量的形参名作为AO的属性名,值为undefined
  • 将实参值和形参进行统一
  • 在函数体里面找函数声明,值赋予函数体

根据这四条法则我们回到最开始的题目进行讲解

例一

    function foo(a){
        console.log(a);
        var a=123;
        console.log(a);
        function a(){}
        console.log(a);
        var b=function(){}
        console.log(b);
        function d(){}
    }
    foo(1);

    /***
     * 1.创建AO对象
     * AO{
     *
     * }
     * 2.找形参和变量声明,将变量的形参名作为AO对象的属性名,值为undefined
     * AO{
     *     a:undefined
     *     b:undefined
     * }
     * 注:由于形参a和变量声明a相同,取其中一个即可
     *
     * 3.将实参值和形参进行统一
     * AO{
     *     a:undefined=>a:1,
     *     b:undefined
     * }
     *
     * 4.在函数体里面找函数声明,值赋予函数体
     *
     * AO{
     *     a:1=>function a(){},
     *     b:undefined,
     *     d:function d(){}
     * }
     * 此时预编译结束,开始函数执行
     */

根据步骤分析

1、创建AO对象

2、找形参和变量声明,将变量的形参名作为AO的属性名,值为undefined

形参:a

变量声明:a,b

由于形参和变量声明都是同一个,所以肯定出现覆盖的情况,取其中一个就可以了,此时AO对象中含有两个属性

AO{
	a:undefined,
	b:undefined,
}

3、将实参值和形参进行统一

实参值:1

AO{
	a:1,
	b:undefined
}

此时的a从undefined变成1

4、在函数体里面找函数声明,值赋予函数体

函数声明:function a(){},function d(){}

注意:b是函数表达式,不要弄错了

AO{
	a:function a(){},
    b:undefined,
    d:function d(){}    
    
}

此时预编译结束,函数开始执行,解释一行执行一行

第一个输出function a(){},到了第二个的时候,var a已经提升了,但是a=123没有调用,所以第二个输出123

第三个的时候,function a(){}已经进行提升了,所以这一行代码不要看,直接输出123,同理b=function (){}赋值也一样。

答案依次是:function a(){},123,123,function (){}

例二

    function test(a,b) {
        console.log(a);
        c=0;
        var c;
        a=3;
        b=2;
        console.log(b);
        function b() {}
        function d() {}
        console.log(b);
    }
    test(1);
    /***
     * 1.创建AO对象
     * AO{
     *
     * }
     * 2.找形参和变量声明,将变量的形参名作为AO的属性名,值为undefined
     *  AO{
     *     a:undefined,
     *     b:undefined,
     *     c:undefined,
     *  }
     * 3.将实参值和形参进行统一
     *  AO{
     *      a:undefined=>a:1,
     *      b:undefined,
     *      c:undefined
     *  }
     *  4.在函数体里面找函数声明,值赋予函数体
     *  AO{
     *      a:1,
     *      b:undefined=>function b(){},
     *      c:undefined,
     *      d:function d(){}
     *  }
     *  预编译阶段结束,函数开始执行
     *
     */

1、创建AO对象

2、找形参和变量声明,将变量的形参名作为AO对象的属性名,值为undefined

形参:a,b

变量声明:c

AO{
	a:undefined,
    b:undefined,
    c:undefined,
}

3、将实参值和形参进行统一

实参值:1

AO{
    a:1,
    b:undefined,
    c:undefined,
}

4、在函数体里面找函数声明,值赋予函数体

函数声明:function b(){},function d(){}

AO{
    a:1,
    b:function b(){},
   	c:undefined,
    d:functiond(){}
}

预编译阶段结束,函数开始执行

答案:1,2,2

注意:函数执行上下文发生在函数执行的前一刻

全局预编译(全局执行期上下文)

to be honest,全局预编译和函数预编译都差不多,少了中间的第三步,将实参值和形参进行统一

  • 创建GO对象
  • 找变量声明,值为undefined
  • 找函数声明,值赋予函数体

函数预编译发生在函数执行的前一刻,而全局预编译发生在script标签创建的时候,可以看作script是一个大的function。

全局执行上下文和函数执行上下文同时使用才是真香,一起来看如下两个示例

例一

    console.log(test);
    function test(test) {
        console.log(test);
        var test=234;
        console.log(test)
        function test() {}
    }
    test(1);
    var test=123;

    /***
     * 1.创建GO对象
     * GO{
     *
     * }
     * 2.找变量声明,值为undefined
     * GO{
     *     test:undefined
     * }
     * 3.找函数声明,值赋予函数体
     * GO{
     *     test:undefined=>function test(){....此处省略},
     * }
     * 全局预编译结束,开始执行代码
     *
     */

    /***
     * 1.创建AO对象
     * AO{
     *
     * }
     * 2.找形参和变量声明,将形参的变量名作为AO对象的属性名,值为undefined,
     *  AO{
     *     test:undefined,
     *  }
     *  3.将实参值和形参值统一
     *  AO{
     *      test:undefined=>test:1,
     *  }
     *  4.在函数体里面找函数声明,值赋予函数体
     *  AO{
     *      test:1=>test:function test(){}
     *  }
     *  函数预编译结束,开始执行代码
     *
     *
     *
     */

一、全局预编译

1、创建GO对象

GO{

}

2、找变量声明,值为undefined

变量声明:test

GO{
	test:undefined
}

3、找函数声明,值赋予函数体

函数声明:function test(test){....}

GO{
    test:function test(test){....}
}

全局预编译结束,开始执行代码,进入函数预编译

二、函数预编译

1、创建AO对象

AO{
    
}

2、找形参和变量声明,将形参的变量名作为AO的属性名,值为undefined

形参:test

变量声明:test

AO{
    test:undefined
}

3、将实参值和形参统一

实参值:1

AO{
    test:1
}

4、在函数体里找函数声明,值赋予函数体

函数声明:function test(){}

AO{
    test:function test(){}
}

函数预编译结束,开始执行代码

答案:function test(test){....},function test(){},234

这里需要多分析全局预编译,还是万变不离其中

例二

    global=100;
    function fn() {
        console.log(global);
        global=200;
        console.log(global);
        var global=300;
    }
    fn();
    var global;

    /***
     * 1.创建GO对象
     * GO{
     *
     * }
     * 2.找变量声明,值为undefined
     * GO{
     *     global:undefined
     * }
     * 3.找函数声明,值赋予函数体
     * GO{
     *     global:undefined,
     *     fn:function fn(){...}
     * }
     *
     * 全局预编译结束,执行代码,进入函数预编译
     */

    /***
     *1.创建AO对象
     * AO{
     *
     * }
     * 2.找形参和变量声明,将形参的变量名作为AO的属性名,值为undefined
     *  AO{
     *      global:undefined
     *  }
     * 3.将实参值和形参统一
     *  AO{
     *      global:undefined
     *  }
     * 4.在函数体里面找函数声明,值赋予函数体
     * AO{
     *     global:undefined
     * }
     *函数预编译结束,开始执行代码
     *
     */

一、全局预编译

1、创建GO对象

GO{
    
}

2、找变量声明,值为undefined

变量声明:global

GO{
    global:undefined
}

3、找函数声明,值赋予函数体

GO{
    global:undefined,
    fn:function fn(){.....}
}

全局预编译完成,执行代码,进入函数预编译

二、函数预编译

1、创建AO对象

AO{
    
}

2、找形参和变量声明,将形参的变量名作为AO对象的属性名,值为undefined

形参:没有

变量声明:global

AO{
    global:undefined
}

3、将实参值和形参统一

实参值:没有

AO{
    global:undefined
}

4、在函数体里找函数声明,值赋予函数体

函数声明:没有

AO{
    global:undefined
}

函数预编译完成,执行代码

答案:undefined,200

在这里涉及一点点作用域和作用域链的知识,就近原则,自己有就用自己的,自己没有就看下GO里面是否有,如果都没有就是undefined,

函数执行的时候,自己里面有global,所以就用自己的。

现在回过头来看现在这两句话

  • 1、imply global 暗示全局变量,即任何变量,如果变量未经声明就赋值,此变量就为全局对象所有

  • 2、一切声明的全局变量都是window属性

可以确认的是GO就是window,从window里面取值就是从GO里面取值。

经典题目

笔者找了一道非常有意思的题目,自己按照步骤也做错了,所以在这里分享一下给大家

    a=100;
    function demo(e) {
        function e() {}
        arguments[0]=2;
        console.log(e);
        if(a){
            var b=123;
            function c() {}
        }
        var c;
        a=10;
        var a;
        console.log(b);
        f=123;
        console.log(c);
        console.log(a);
    }
    var a;
    demo(1);
    console.log(a);
    console.log(f);
    /***
     * 1.创建GO对象
     * GO{
     *
     * }
     * 2.着变量声明,值为undefined
     * GO{
     *     a:undefined
     * }
     * 3.找函数声明,值赋予函数体
     * GO{
     *     a:undefined,
     *     demo:function demo(e){...}
     * }
     * 全局预编译完成,执行代码进入函数预编译
     *
     */
    /***
     *1.创建AO对象
     * AO{
     *
     * }
     * 2.找形参和变量声明,将形参的变量名作为AO对象的属性名,值为undefined
     *  AO{
     *      e:undefined,
     *      a:undefined,
     *      b:undefined,
     *      c:undefined,
     *
     *  }
     *  3.将实参值和新参统一
     *  AO{
     *      e:1,
     *      a:undefined,
     *      b:undefined,
     *      c:undefined,
     *  }
     *  4.在函数体里面找函数声明,值赋予函数体
     *  AO{
     *      e:function e(){},
     *      a:undefined,
     *      b:undefined,
     *      c:function c(){}
     *  }
     *  函数预编译完成,执行代码
     */

一、全局预编译

1、创建GO对象

GO{

}

2、找变量声明,值为undefined

变量声明:a

GO{
    a:undefined
}

3、找函数声明,值赋予函数体

函数声明:function demo(e){...}

GO{
    a:undefined,
    demo:function demo(e){...}
}

全局预编译完成,执行代码,进入函数预编译

二、函数预编译

1、创建AO对象

AO{
    
}

2、找形参和变量声明,将形参的变量名作为AO对象的属性名,值为undefined

形参:e

变量声明:a,b,c

AO{
    e:undefined,
    a:undefined,
    b:undefined,
    c:undefined
}

3、将实参值和形参统一

实参值:1

形参:e

AO{
    e:1,
    a:undefined,
    b:undefined,
    c:undefined
}

4、在函数体里面找函数声明,值赋予函数体

函数声明:function e(){},function c(){}

AO{
    e:function e(){},
    a:undefined
    b:undefined
    c:function c(){}
}

函数预编译完成,执行代码

理想答案

2,undefined,function c(){},10,100,123

实际答案

2,undefined,undefined, 10,100 ,123

由于谷歌浏览器的新规定,不能在if语句里面定义函数,所以,function c(){}无法提升

致谢读者

看到这里的读者都是最帅的,最美的,本篇是我尝试写文章的新做法,第一次搞这种类型的文章,因为希望自己的文章阅读起来可以没有那么枯燥(可以从中获取更多的快乐),学习是一件特别痛苦的事情,看文章也是,我也希望自己的文章可以更加的生动、幽默。让看文章的你既可以学到东西也不会那么枯燥。

如果您有更好的建议,请在下方留下您宝贵的评论。

结尾

如果觉得本篇文章对您有用的话,可以麻烦您帮忙点亮那个点赞按钮吗?

对于二郎神杨戬这个暖男来说:真的真的非常有用,您的支持将是我继续写文章前进的动力,我们下篇文章见。