深入理解js变量提升和函数提升

深入理解js的变量提升和函数提升

1. 变量提升
   在ES6之前,JavaScript没有块级作用域的概念（一对花括号{}即为一个块级作用域)，只有全局作用域和函数作用域，变量提升即是将变量声明提升到它所在的作用域的最开始的部分。
   意思即是：在我们的js中,代码的执行是分两步进行走的，1、预解析 2、一步一步执行
   在预解析阶段，首先会在全局作用域内，js解析器会找到所有的var、function、参数，并提前到当前作用域的最顶上去(变量的赋值操作不会提前，还在原来的地方)，此时并没有执行代码。然后再开始一行一行执行代码。遇到了函数调用，于是进入到函数作用域内，又开始分两步骤走，预解析 一步一步执行，以此类推。如例子：

   console.log(global); //undifined
   var global="222";
    console.log(global); //222
    
   f() {
    console.log(a);  //undifined
    var a="111"; 
    console.log(a); //111
   }
   f();

之所以会是以上打印的结果，是由于js的变量提升，实际上上面的代码是按照以下来执行的：

 var global; //变量提升，全局作用域范围内，此时只是声明，并没有赋值
 console.log(global); //undifined
 var global="222"; //此时才进行赋值
 console.log(global); //打印变量上面赋的值
    
 f() {
 	var a;//先进行变量提升，函数作用域范围内
    console.log(a);  //undifined
    var a="111"; 
    console.log(a); //111
  }
 f();

2. 函数提升
   js中创建函数由两种方式，函数声明式和函数赋值式。注意：只有函数声明才会存在函数提升(如变量提升一样)，如下：

console.log(f1); //function f1() {}
console.log(f2); //undifined
function f1() {} //函数声明式
var f2=function () {}//函数赋值式

之所以会有这样的输出结果，正是由于js中的函数提升起到了效果。

function f1() {} //函数提升，整个代码块提升到文件的最开始
console.log(f1);
var f2=function(){}