web前端学习655-657（JavaScript预解析---预解析，变量预解析和函数预解析）

JavaScript 预解析

目标：

• 能够知道解析器运行JS分为哪两步
• 能够说出变量提升的步骤和运行过程
• 能够说出函数提升的步骤和运行过程

1 预解析

可以先看下面例子

JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript 解析器在运行JavaScript代码的
时候分为两步: 预解析和代码执行。

2 变量预解析和函数预解析

1 我们js引擎运行js分为两步: 预解析 代码执行
（1）预解析js引擎会把js 里面所有的 var 还有function 提升到当前作用域的最前面
（2）代码执行按照代码 书写的顺序 从上往下执行

2 预解析分为 变量预解析( 变量提升) 和 函数预解析(函数提升)
（1）变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作

（2）函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数

看下面例子

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

fun();
var fun() = function() {  // 报错 坑 2
    console.log(22);
}
// 相当于执行一下代码
var fun; 
fun();  //没有函数 不能调用，报错。 
// 写在函数后面则可以
fun = function() {
    console.log(22);
}

注意：函数表达式 调用必须写在函数表达式下面

3 预解析案例

预解析面试容易问

案例：结果是几？

1

// 案例1
var num = 10;
fun();
function fun() {
  console.log(num);
  var num = 20;
}
// 相当于执行了一下操作
var num;
function fun() {
  var num;
  console.log(num);   // 输出结果undefined
  num = 20;
}
num = 10;
fun();

2

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

3

// 案例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;
  var b = 9;
  console.log(a);  // undefined
  console.log(b);  // 9
  var a = '123';
}
a = 18;
f1();

4 （比较经典）

// 案例4 比较经典
    f1();
    console.log(c) ;
    console.log(b) ;
    console.log(a) ;
    function f1() {
      var a = b = c = 9;
      console.log(a) ;
      console.log(b) ;
      console.log(c) ;
    }
    // 相当于执行代码
    function f1() {
      var a = b = C = 9;
      // 相当于 var a = 9; b = 9; c = 9; b 和 c 直接赋值 没有 var 声明 当全局变量看

      // 集体声明 var 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);   // 报错 （a 局部变量，外面的不能调用）