JavaScript的变量提升和函数提升

70 阅读1分钟

运行js分为两步:1.预解析 2.代码执行

预解析会把js里面的varfunction提升到当前作用域的最前面 (只是提升声明,不提升赋值操作)

//例1
console.log(num);//报错
//例2
console.log(num);// undefind,说明已经声明了变量num
var num = 10;
//相当于以下代码
var num;
console.log(num);
num = 10;
//例3
fn();//可以运行,因为整个函数会提升
function fn() {
    console.log(11);
}
//相当于以下代码
function fn() {
    console.log(11);
}
fn();
//例4
fun();//报错
var fun = function() {//这种函数赋值,函数不会提升
    console.log(22);
}
//4相当于一下代码
var fun;
fun();//此处报错,所以4报错
fun = function() {
    console.log(22);
}

经典案例

案例1

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

案例2(重点)

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,是直接赋值,当全局变量看
    //集体声明写法: var a = 9, b = 9, c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}
//相当于以下代码
function f1() {
    var a;
	a = b = 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);//报错

image.png