一、预解析
JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行
JavaScript 代码的时候分为两步:预解析和代码执行。
预解析:在当前作用域下, JS 代码执行之前,浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。
代码执行: 从上到下执行JS语句。
预解析只会发生在通过 var 定义的变量和 function 上。学习预解析能够让我们知道为什么在变量声明之前访问变量的值是 undefined,为什么在函数声明之前就可以调用函数。
二、变量预解析和函数预解析
2.1 变量预解析(变量提升)
预解析也叫做变量、函数提升。
变量提升: 变量的声明会被提升到当前作用域的最上面,变量的赋值不会提升。
console.log(num); // undefined
var num = 10;
//相当于以下代码顺序
var num;
console.log(num);
num = 10;
2.2 函数预解析(函数提升)
函数提升: 函数的声明会被提升到当前作用域的最上面,但是不会调用函数。
fn();
function fn() {
console.log('打印'); //打印
}
//相当于以下代码顺序
function fn() {
console.log('打印');
}
fn();
2.3 解决函数表达式声明调用问题
fn(); //报错
var fn = function() {
console.log('想不到吧');
}
//相当于以下代码顺序
var fn;
fn();
fn = function() {
console.log('想不到吧');
}
三、预解析案例
案例1
// 案例1
var num = 10;
fun();
function fun() {
console.log(num); // undefined
var num = 20;
}
//相当于以下代码顺序
var num;
function fun() {
var num;
console.log(num);
num = 20;
}
fun();
案例2
// 案例2
var num = 10;
function fn(){
console.log(num); // undefined
var num = 20;
console.log(num); // 20
}
fn();
//相当于以下代码顺序
var num;
function fn(){
var num;
console.log(num);
num = 20;
console.log(num);
}
num = 10;
fn();
案例3
// 案例3
var a = 18;
f1();
function f1() {
var b = 9;
console.log(a); // undefined
console.log(b); // 9
var a = '123';
}
//相当于以下代码顺序
var a;
function f1() {
var b;
var a;
b = 9;
console.log(a);
console.log(b);
a = '123';
}
a = 18;
案例4
// 案例4
f1(); //9 9 9
console.log(c); // 9
console.log(b); // 9
console.log(a); // 报错
function f1() {
var a = b = c = 9;
console.log(a);
console.log(b);
console.log(c);
}
//相当于以下代码顺序
function f1() {
var a;
a = 9; //局部变量
b = 9; //全局变量
c = 9; //全局变量
console.log(a);
console.log(b);
console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);