1.预解析
JavaScript代码是由浏览器中的JavaScript解释器来执行的。JavaScript解析器在运行JavaScript代码的时候分两步:预解析和代码执行。
- 预解析:js 引擎会把 js 里面所有的var还有function提升到当前作用域的最前面
- 代码执行:按照代码书写的顺序从上往下执行
1.1 变量预解析(变量提升)
就是把所有的变量声明提升到当前的作用域最前面(不提升赋值操作)
//1.普通变量
console.log(num);//打印结果:undefined
var num = 10;
//以上两行代码相当于执行了以下代码
var num;
console.log(num);
num = 10;
//所以会打印undefined
//2.函数表达式
fun();//报错,fun not a function
var fun = function() {
console.log(22);
}
//相当于执行了以下代码
var fun;//声明变量
fun();//fun是变量不是函数不能使用()
fun = function() {
console.log(22);
}
//因此,函数表达式,在调用的时候必须写在函数表达式下面
1.2 函数预解析(函数提升)
函数提升就是把所有的函数声明提升到当前作用域的最前面 (不调用函数)
fn();
function fn() {
console.log(11);//无报错,打印 11
}
//执行顺序如下
function fn() {
console.log(11);
}
fn();
案例1
var num = 10;
fun();
function fun() {
console.log(num);
var num = 20;
}
//打印结果:undefined
//相当于执行了以下操作
var num;
function fun() {
var num;
console.log(num);
num = 20;
}
num = 10;
fun();
案例2
var num = 10;
function fn() {
console.log(num);
var num = 20;
console.log(num);
}
fn();
//打印结果:undefined,20
//相当于执行了以下代码
var num;
function fn() {
var num
console.log(num);
num = 20;
console.log(num);
}
num = 10;
fn();
案例3
var a = 18;
f1();
function f1() {
var b = 9;
console.log(a);
console.log(b);
var a = '123';
}
//打印结果:undefined, 9
//相当于执行以下代码
var a;
function f1() {
var b;
var a;
b = 9;
console.log(a);
console.log(b);
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);
}
打印结果: 9 9 9 9 9 报错:a is not defined
//相当于执行以下代码
function f1() {
//var a = b = c = 9;相当于 var a = 9 ; b = 9; c = 9 即 b 和 c 没有var 声明 当全局变量看
//集体声明: var a = 9,b = 9, c = 9;相当于 var a; var b; var c;
var a;
a = b = c = 9;
console.log(a);
console.log(b);
console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);