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

时间  2020-10-03 标签 进阶 系列 执行 上下文
❝

点赞再看，年薪百万 本文已收录至https://github.com/likekk/-Blog欢迎你们star😘😘😘，共同进步。若是文章有出现错误的地方，欢迎你们指出。后期将在将GitHub上规划前端学习的路线和资源分享。前端

❞

前言

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

本身没有去回家，主要是回家有点远，历来这边读书到如今的国庆期间一直都没有回过家，这七八天原本也打算出去玩的（确定须要安排时间出去玩），可是想一想仍是学点东西比较好。因而有了这篇博客。github

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

正文

首先在讲解预编译以前，咱们先说下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(){}、12三、12三、function(){}

❞

可是到这里我仍是没有那么快讲解预编译，考虑了一下，讲解以前仍是须要铺垫一点东西，不然很难讲清楚。

预编译前期

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

❝

一、imply global 暗示全局变量，即任何变量，若是变量未经声明就赋值，此变量就为全局对象全部

二、一切声明的全局变量都是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(){}
     * }
     * 此时预编译结束，开始函数执行
     */

根据步骤分析

一、建立AO对象

二、找形参和变量声明，将变量的形参名做为AO的属性名，值为undefined

形参：a

变量声明：a，b

因为形参和变量声明都是同一个，因此确定出现覆盖的状况，取其中一个就能够了，此时AO对象中含有两个属性

AO{
 a:undefined,
 b:undefined,
}

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

实参值：1

AO{
 a:1,
 b:undefined
}

此时的a从undefined变成1

四、在函数体里面找函数声明，值赋予函数体

函数声明：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(){}
     *  }
     *  预编译阶段结束，函数开始执行
     *
     */

一、建立AO对象

二、找形参和变量声明，将变量的形参名做为AO对象的属性名，值为undefined

形参：a，b

变量声明：c

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

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

实参值：1

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

四、在函数体里面找函数声明，值赋予函数体

函数声明：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{

}

二、找变量声明，值为undefined

变量声明：test

GO{
 test:undefined
}

三、找函数声明，值赋予函数体

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

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

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

2、函数预编译

一、建立AO对象

AO{
    
}

二、找形参和变量声明，将形参的变量名做为AO的属性名，值为undefined

形参：test

变量声明：test

AO{
    test:undefined
}

三、将实参值和形参统一

实参值：1

AO{
    test:1
}

四、在函数体里找函数声明，值赋予函数体

函数声明：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{
    
}

二、找变量声明，值为undefined

变量声明：global

GO{
    global:undefined
}

三、找函数声明，值赋予函数体

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

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

2、函数预编译

一、建立AO对象

AO{
    
}

二、找形参和变量声明，将形参的变量名做为AO对象的属性名，值为undefined

形参：没有

变量声明：global

AO{
    global:undefined
}

三、将实参值和形参统一

实参值：没有

AO{
    global:undefined
}

四、在函数体里找函数声明，值赋予函数体

函数声明：没有

AO{
    global:undefined
}

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

❝

答案：undefined，200

❞

在这里涉及一点点做用域和做用域链的知识，就近原则，本身有就用本身的，本身没有就看下GO里面是否有，若是都没有就是undefined,

函数执行的时候，本身里面有global，因此就用本身的。

如今回过头来看如今这两句话

  • 一、imply global 暗示全局变量，即任何变量，若是变量未经声明就赋值，此变量就为全局对象全部

  • 二、一切声明的全局变量都是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{

}

二、找变量声明，值为undefined

变量声明：a

GO{
    a:undefined
}

三、找函数声明，值赋予函数体

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

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

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

2、函数预编译

一、建立AO对象

AO{
    
}

二、找形参和变量声明，将形参的变量名做为AO对象的属性名，值为undefined

形参：e

变量声明：a，b，c

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

三、将实参值和形参统一

实参值：1

形参：e

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

四、在函数体里面找函数声明，值赋予函数体

函数声明：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(){}没法提高

致谢读者

看到这里的读者都是最帅的，最美的，本篇是我尝试写文章的新作法，第一次搞这种类型的文章，由于但愿本身的文章阅读起来能够没有那么枯燥（能够从中获取更多的快乐），学习是一件特别痛苦的事情，看文章也是，我也但愿本身的文章能够更加的生动、幽默。让看文章的你既能够学到东西也不会那么枯燥。

若是您有更好的建议，请在下方留下您宝贵的评论。

结尾

若是以为本篇文章对您有用的话，能够麻烦您帮忙点亮那个点赞按钮吗?

对于二郎神杨戬这个暖男来讲：「真的真的很是有用」，您的支持将是我继续写文章前进的动力，咱们下篇文章见。

联系我们 沪ICP备13005482号-10