javascript var/function 变量提升

前言

在javascript中，var、function会变量提升（hoisting）；var声明，会在任何code执行前，将变量提升到所在作用域的最高处。function声明，在编译阶段加载到内存，所以在var声明之前就会执行。

var提升

var声明会在任何代码执行之前，提升到所在作用域的最高处。

console.log(x) //undefined
var x = 1;

相当于

var x;//
console.log(x) //只声明，未初始化，所以输出undefined 
x = 1;

理解了这个特性，那么下边引用函数内的循环变量也就明白了。

function f(){
	for(var i=0; i<3; i++){

	}
	console.log(i) //3
}
f()

等同于

function f(){
	var i;
	for(i=0; i<3; i++){

	}
	console.log(i)
}
f()

通常方式声明，不会变量提升

如果不使用var，而是通常方式声明，则不会变量提升，只有执行到所在行，才会声明为全局变量

console.log(x) //ReferenceError: x is not defined
x = 1 //通常方式的声明变量不会变量提升

要防止var提升，可以使用let，let声明了块级作用域，不会有变量提升

let没有变量提升

执行到所在行，才会声明

console.log(x) //ReferenceError: x is not defined
let x = 1 

let声明了块级作用域

{
let x = 1 
}
console.log(x) //ReferenceError: x is not defined

function f(){
	
	for(let i=0; i<3; i++){

	}
	console.log(i)//ReferenceError: i is not defined
}
f()

function 提升

function 声明，在js编译阶段就会加载到内存，在var提升、任何代码执行之前，执行。这意味着，可以先调用函数，后声明函数，但function expression不具有此特性，function expression只有执行到所在行，才会执行。

f();
function f(){
	console.log("f()");//输出f()
}

function 声明提升到任何代码、var声明之前

f();
function f(){
	console.log("function()");
}
var f = 4
console.log(f)

输出

function()
4

总结

在javascript中，var、function会变量提升（hoisting）；var声明，会在任何code执行前，将变量提升到所在作用域的最高处。function声明，在编译阶段加载到内存，所以在var声明之前就会执行。

9年全栈开发经验，请关注个人公众号