前言

在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年全栈开发经验，请关注个人公众号