变量提升与函数提升

1.js引擎运行js分两步走：预解析  代码执行

预解析：js引擎会把js里面所有的 var 还有 function 提升到当前作用域的最前面；

代码执行：按照代码书写的顺序从上往下执行； 

2.变量提升

指把所有的变量声明提升到当前的作用域最前面，不提升赋值操作；

console(num); // undefined
var num = 10;
// 相当于执行以下代码
var num;
console(num);
num = 10

函数表达式：调用必须要写在函数表达式的下面；

fun();// 报错
var fun = function(){
    console.log(22);
}
// 相当于执行以下代码
var fun;
fun();
fun = function(){
    console.log(22);
}

3.函数提升

指把所有的函数声明提升到当前作用域的前面，不调用函数；

// 因为是函数声明，所以将fn()放在最前面也不报错
fn(); // 11 
function  fn() {
    console.log(11);
}

4.预解析案例

// 案例一
var num = 10;
fun();

function(){
  console.log(num);
  var num = 20;
}

// 相当于执行以下操作

var num;
function fun(){
   var num; 
   console.log(num);
   num = 20;
}
num = 10;
fun();

//  结果输出为undefined

// 案例二
var num = 10;

function fn(){
   console.log(num);
   var num = 20;
   console.log(num);
}
fn();
// 相当于以下代码
var num
function fn(){
   var num
   console.log(num);
   num = 20;
   console.log(num);
}
num = 10;
fn();

// 输出结果为 undefined  20

// 案例3
var a = 18;
f1();

function f1(){
 var b = 9;
 console.log(a);
 console.log(b);
 var a = '123';
}
// 相当于以下代码

var a;
function f1(){
 var b;
 var a;
 b = 9; 
 console.log(a);
 console.log(b);
  a = '123';
}
a = 18;
f1();

// 结果为：undefined  9 

//案例4
f1();
console.log(c);
console.log(b);
console.log(a);
function f1(){
  var a=b=c=9;  
// 相当于 var a=9; b=9; c=9; (b与c前没有var，b与c当全局变量看)
 // 集体声明 var a = 9, b = 9, c = 9
  console.log(a); 
  console.log(b);
  console.log(c);
}
// 以上代码相当于
function f1(){
  var a
  a=9;
  b=9;
  c=9;
  console.log(a); // 输出 9
  console.log(b); // 输出 9
  console.log(c); // 输出 9
}
f1();
console.log(c); // 输出 9
console.log(b); // 输出 9
console.log(a); undefined