执行上下文：

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>02_执行上下文</title>
  </head>

  <body>
    <!--
1. 代码分类(位置)
  * 全局代码
  * 函数代码
2. 全局执行上下文
  * 在执行全局代码前将window确定为全局执行上下文
  * 对全局数据进行预处理
    * var定义的全局变量==>undefined, 添加为window的属性
    * function声明的全局函数==>赋值(fun), 添加为window的方法
    * this==>赋值(window)
  * 开始执行全局代码
3. 函数执行上下文
  * 在调用函数, 准备执行函数体之前, 创建对应的函数执行上下文对象（虚拟的，存在于栈），不执行函数，就不占用空间
  * 对局部数据进行预处理
    * 形参变量==>赋值(实参)==>添加为执行上下文的属性
    * arguments==>赋值(实参列表), 添加为执行上下文的属性
    * var定义的局部变量==>undefined, 添加为执行上下文的属性
    * function声明的函数 ==>赋值(fun), 添加为执行上下文的方法
    * this==>赋值(调用函数的对象)
  * 开始执行函数体代码
-->
    <script type="text/javascript">

      console.log(a1);
      console.log(a2);
      console.log(a3);
      // console.log(a4); // Uncaught ReferenceError: a4 is not defined at 02_执行上下文.html: 36
      console.log(this);

      var a1 = 3;
      var a2 = function () {
        console.log('a2()');
      }
      function a3() { // 断点调试不会执行这一行，因为函数提升早就执行了
        console.log('a3()');
      }
      a4 = 4;


      function fn(x, y) {
        console.log(x, y);
        console.log(b1);
        console.log(b2);
        console.log(arguments);
        console.log(this);

        // console.log(b3)

        var b1 = 5;
        function b2() {

        }
        b3 = 6;
      }
      fn();


    </script>
  </body>

</html>

控制台运行结果：

 

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>03_执行上下文栈</title>
  </head>

  <body>
    <!--
1. 在全局代码执行前, JS引擎就会创建一个栈来存储管理所有的执行上下文对象
2. 在全局执行上下文(window)确定后, 将其添加到栈中(压栈)
3. 在函数执行上下文创建后, 将其添加到栈中(压栈)
4. 在当前函数执行完后,将栈顶的对象移除(出栈)
5. 当所有的代码执行完后, 栈中只剩下window
-->
    <script type="text/javascript">
      //1. 进入全局执行上下文环境,压栈
      var a = 10;
      var bar = function (x) { // 这一行不代表函数执行
        var b = 5;
        foo(x + b);              //3. 进入foo执行上下文环境，压栈
      } // 5. 执行完毕后，bar执行上下文环境出栈
      var foo = function (y) {
        var c = 5;
        console.log(a + c + y);
      } // 4. 执行完毕后，foo执行上下文环境出栈
      bar(10);                    //2. 进入bar函数执行上下文环境，压栈
      // 如果bar在var foo赋值前会报错Uncaught TypeError: foo is not a function at bar...
    </script>
    <!-- 全局上下文环境出栈 -->

  </body>

</html>

运行结果：

30

笔试例题1：

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>04_执行上下文栈2</title>
  </head>

  <body>
    <!--
1. 依次输出什么?
2. 整个过程中产生了几个执行上下文?
-->
    <script type="text/javascript">
      console.log('global begin: ' + i);
      var i = 1;
      foo(1);
      function foo(i) {
        if (i == 4) {
          return;
        }
        console.log('foo() begin:' + i);
        foo(i + 1);
        console.log('foo() end:' + i);
      }
      console.log('global end: ' + i);
    </script>

  </body>

</html>

控制台运行结果：

 

笔试例题2：

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>05_面试题</title>
  </head>

  <body>
    <script type="text/javascript">
      /*
      测试题1: 先预处理变量, 后预处理函数
      */
      function a() { }
      var a;
      console.log(typeof a); // 先变量提升，后函数提升，然后函数提升覆盖了变量


      /*
      测试题2: 变量预处理, in操作符
       */
      if (!(b in window)) {
        var b = 1;
      }
      console.log(b);

      /*
      测试题3: 预处理, 顺序执行
       */
      var c = 1;
      function c(c) {
        console.log(c);
        var c = 3;
      }
      c(2);
      // 上面相当于如下代码
      // var c;
      // function c(c) {
      //   console.log(c);
      //   var c = 3;
      // }
      // c = 1; // c不是函数了，是变量
      // c(2); // Uncaught TypeError: c is not a function at 05_面试题.html: 33

    </script>
  </body>

</html>

运行结果：

 

 ==============Talk is cheap, show me the code==============