声明提升

声明提升

以JavaScript为代表的一些编程语言中有声明提升这一问题，定义的变量、函数等会在相关作用域代码执行前就被提升到顶部先执行声明。JS早期只用var定义变量更是不可避免的出现一些意料之外的情况。下面这个例子是很典型的：

• 1:

var a=123;
			function fun(a)
			{
				console.log(a);
				a=456;
			}
			fun();
			console.log(a);

• 2:

var a=123;
			function fun()
			{
				console.log(a);
				a=456;
			}
			fun();
			console.log(a);

• 大家觉得这两题分别会输出什么？
• 答案是：
• 1：undefined ,123
• 2：123 ,456
• 解释：
• 1:

//代码执行前var a和fun()都会被声明提升到执行开头
var a=123;
function fun(a)  	//此位置fun(a)表示函数作用域中直接定义
{			   		//了变量a但没赋值，同样在此作用域会被声明提前
		console.log(a);		//此段代码执行时优先在自己本身作用域寻找a，
							//结果找到了未定义(undefined)的a。
		a=456;		//注：变量a没有用var关键字声明，故不会被声明提前。
}
fun();					//输出undefined（定义了a但未赋值）
console.log(a);			//输出123（找到外面全局作用于a=123输出。）

• 2:

//代码执行前var a和fun()都会被声明提升到执行开头
var a=123;
function fun()		//此位置fun()括号中没有形参，所以没直接定义变量a
{
		console.log(a);		//在自己本身作用域没有找到a，所以向上一级
						  	//作用域找到了a=123
						  	
		a=456;				//函数执行，a=456将外面变量a
							//修改为456.（因为自己内部本身没有a）
}
fun();					//输出123（找到外部a=123输出）
console.log(a);			//输出456（函数修改了外部a将其变为a=456输出）

如何证明此语言是进行了声明提升、程序运行时代码顺序如何进行的呢？大家可以在浏览器中F12查看源代码，在程序运行开始设置断点，然后刷新页面，就可以看见断点处以及之后的代码还没运行时定义的变量a以及函数fun()就已经被声明了，再按F10逐行运行代码可看见后续变量a的变化等，甚至可以选中想监控的对象进行对它的监视。如下图：

详细操作方法以及有关问题大家可自行搜索或与我交流。