javaScript预解析

目录

概述

变量预解析和函数与解析

变量预解析（变量提升）

函数预解析

预解析案例

---

1问：

console.log(num); // 结果是多少？

结果： 

2问：

console.log(num); // 结果是多少？
var sum = 10;

结果：

3问：

fu();
function fu(){
    console.log('打印');
}

结果：

4问：

fn();
var fn = function (){
    console.log('想不到吧');
}

结果：

概述

javaScript代码是浏览器中的javaScript解析器来执行的。javaScript解析器在运行javaScript代码时分为两步：预解析和代码执行

预解析：在当前作用域下，JS代码执行之前，浏览器会默认把带有var和function声明的变量在内存中进行提前声明或者定义。

代码执行：从上而下执行代码

变量预解析和函数与解析

变量预解析（变量提升）

预解析也叫变量、函数提升

变量提升：变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。

console.log(num);  // 结果是多少？
var num = 10;      // ？

这段代码变量提升后为：

var num;
console.log(num);  
num = 10;      

结果是undefined

函数预解析

函数提升：函数的声明会被提升到当前作用域的最上面，但是不会调用函数。

fn();
function fn() {
    console.log('打印');
}

这段代码函数提升后为：

function fn() {
    console.log('打印');
}

fn();

结果为：打印

预解析案例

// 案例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
var num = 10;
function fn(){
    console.log(num);
    var num = 20;
    console.log(num);
} 
fn();

// 预解析后
var num;
function fn(){
    var sun;
    console.log(num); // undefined
    num = 20;
    console.log(num); // 20
} 
num = 10;
fn();

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

// 案例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声明，属于全局变量
  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属于局部变量，外部不能访问