执行上下文与执行上下文栈

执行上下文与执行上下文栈

01.变量提升与函数提升

1.js中只有两种作用域

​ a:全局作用域

​ b:函数作用域

在ES6之前，JS是没有块级作用域的

var i =1;
if(true){
    var a='哈哈';//变量`在这里插入代码片`a是声明在if的{}里，但在JS里面，因为没有块级作用域，所以此时的变量a的作用域是全局作用域
}
console.log(a);//可输出打印变量a的值

2.什么是变量提升？

代码的执行分两步：

1. 解析
2. 一步一步执行

变量提升就是变量声明会被提升到作用域的最顶上去，也就是该变量不管是在作用域的哪个地方声明的，都会提升到作用域的最顶上去，其他部分按顺序执行

//变量提升
console.log(a);//undefined
var a='hello world';
console.log(a);//hello world

//上面等价于
var a;
console.log(a);//undefined
a='hello world';//赋值
console.log(a);//hello world

3.什么是函数提升？

function hoistFunction() {
  foo(); // output: I am hoisted

  function foo() {
    console.log('I am hoisted');
  }
}

hoistFunction();

​ 函数可以在声明之前就可以调用，并且跟变量声明不同的是，它还能得到正确的结果，其实引擎是把函数声明整个地提升到了当前作用域的顶部，预编译之后的代码逻辑如下：

function hoistFunction() {
  function foo() {
    console.log(1);
  }

  foo(); // output: 2

  function foo() {
    console.log(2);
  }
}

hoistFunction();

​ 对于函数，除了使用上面的函数声明，更多时候，我们会使用函数表达式，函数表达式可以通过变量访问，所以也存在变量提升同样的效果

// 函数声明
function foo() {
  console.log('function declaration');
}

// 匿名函数表达式:将一个不带名字的函数声明赋值给了一个变量
var foo = function() {
  console.log('anonymous function expression');
};

// 具名函数表达式:带名字的函数赋值给一个变量,这个函数名只能在此函数内部使用
var foo = function bar() {
  console.log('named function expression');
};

函数声明遇到函数表达式时

function hoistFunction() {
  foo(); // 2

  var foo = function() {
    console.log(1);
  };

  foo(); // 1

  function foo() {
    console.log(2);
  }

  foo(); // 1
}

hoistFunction();


// 预编译之后
function hoistFunction() {
  var foo;

  foo = function foo() {
    console.log(2);
  }

  foo(); // 2

  foo = function() {
    console.log(1);
  };

  foo(); // 1

  foo(); // 1
}

hoistFunction();

函数声明的优先级最高会被提升至当前作用域最顶端

第一次调用时实际执行了预编译之后定义的函数声明

第二次调用时由于前面的函数表达式与之前的函数声明同名，故将其覆盖，以后的调用也将会打印同样的结果

函数和变量重名时

函数的优先权是最高的，它永远被提升至作用域最顶部，然后才是函数表达式和变量按顺序执行，

var foo = 3;

function hoistFunction() {
  console.log(foo); // function foo() {}

  foo = 5;
  
  console.log(foo); // 5

  function foo() {}
}

hoistFunction();
console.log(foo);   // 3

// 预编译之后
var foo = 3;

function hoistFunction() {
  var foo;
  foo = function foo() {};
  console.log(foo); // function foo() {} 
  foo = 5;
  console.log(foo); // 5
}

hoistFunction();
console.log(foo);  // 3

4.为什么要提升

函数提升就是为了解决相互递归的问题，大体上可以解决像ML语言这样自下而上的顺序问题。

5.总结

1. 所有的声明都会提升到作用域的最顶上去。
2. 无论变量还是函数，都必须先声明后使用
3. 同一个变量只会声明一次，其他的会被忽略掉。
4. 函数声明的优先级高于变量申明的优先级，并且函数声明和函数定义的部分一起被提升。

02.执行上下文

**概念：**当函数执行时，会创建一个称为执行上下文的内部对象（可理解为作用域）。一个执行上下文定义了一个函数执行时的环境。

分为三类：

• 全局执行上下文——只有一个，浏览器中的全局对象就是 window 对象，this 指向这个全局对象。
• 函数上下文——存在无数个，只有在函数被调用的时候才会被创建，每次调用函数都会创建一个新的执行上下文。
• eval上下文（eval一般不会使用）——指的是运行在 eval 函数中的代码，很少用而且不建议使用。

1.全局执行上下文

​ 1. 全局执行上下文只有一个，在客户端中一般由浏览器创建，也就是我们熟知的window对象，我们能通过this直接访问到它。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vEOiNa5u-1618025279617)(https://i.loli.net/2021/04/10/IwD7gmP4pGzYdxK.png)]

​ 2. 全局对象window上预定义了大量的方法和属性，我们在全局环境的任意处都能直接访问这些属性方法，同时window对象还是**var声明的全局变量的载体。**我们通过var创建的全局对象，都可以通过window直接访问。

var a =1
console.log(window.a);
console.log(this);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RRgOLDzR-1618025279621)(https://i.loli.net/2021/04/10/H9JZwNVL1hTDnSB.png)]

1. 在执行全局代码前将window确定为全局执行上下文

2. 对全局数据进行预处理

3. var定义的全局变量==>undefined, 添加为window的属性

4. function声明的全局函数==>赋值(fun), 添加为window的方法

5. this==>赋值(window)

6. 开始执行全局代码

    console.log(a1,window.a1);
    window.a2()
    console.log(this);
    var a1 =3
    function a2() {  
       console.log('a2()');
    }
   

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RIoThA39-1618025279624)(https://i.loli.net/2021/04/10/qERydtni1PpGMs6.png)]

2.函数执行上下文

​ 函数执行上下文可存在无数个，每当一个函数被调用时都会创建一个函数上下文；需要注意的是，同一个函数被多次调用，都会创建一个新的上下文。

1. 在调用函数, 准备执行函数体之前, 创建对应的函数执行上下文对象
2. 对局部数据进行预处理
3. 形参变量==>赋值(实参)==>添加为执行上下文的属性
4. arguments==>赋值(实参列表), 添加为执行上下文的属性
5. var定义的局部变量==>undefined, 添加为执行上下文的属性
6. function声明的函数 ==>赋值(fun), 添加为执行上下文的方法
7. this==>赋值(调用函数的对象)
8. 开始执行函数体代码

03.执行上下文栈

1. 在全局代码执行前, JS引擎就会创建一个栈来存储管理所有的执行上下文对象
2. 在全局执行上下文(window)确定后, 将其添加到栈中(压栈)
3. 在函数执行上下文创建后, 将其添加到栈中(压栈)
4. 在当前函数执行完后,将栈顶的对象移除(出栈)
5. 当所有的代码执行完后, 栈中只剩下window

<!-- 
1.依次输出什么？
    gd:undfined
    fb:1
    fb:2
    fb:3
    fb:4//4没有输出
    fe:3
    fe:2
    fe:1
    ge:1
2.整个过程产生了几个执行上下文
         5=4(函数)+1(全局)
-->
console.log('global begin:'+i);
var i=1;
foo(i)
function foo(i) {  
    if (i==4) {i
        return;
    }
    console.log('fb:'+i);
    foo(i+1);//递归调用：在函数内部调用自己
    console.log('fe:'+i);
}
console.log('ge:'+i);