浅谈JavaScript变量声明提升

2016-07-12

前段时间阿里实习生内推,一面就被刷了,也是郁闷。今天系统给发通知,大致意思就是内推环节不足以了解彼此,还可以参加笔试,于是赶紧再投一次。官网流程显示笔试时间3月31日,时间快到了,开始刷题。网上搜了一下去年题目,我擦,第一题就不会(伤心中...),继续往下看,第四题也不会。。。好嘛,搜答案吧。搜了一个多小时的博客,结合自己的理解,写下了这篇博文。。。

2014年阿里巴巴前端工程师笔试题目1:

var v = "Hello world"; 	(function() { 		console.log(v); 		var v = "I love you"; 		bar(); 		foo(); 		 function bar(){ 		 	console.log("this is bar!"); 		 } 		  		 var foo = function() { 		 	console.log("this is foo!"); 		 }; 		  	})();
请写出上面的运行结果并说出背后的理由。
题目4:指出一下代码的运行结果,并解释为什么。
function bar() { 	return foo; 	foo = 10; 	function foo() {} 	var foo = 11; }  alert(typeof bar());

其实上面两道题考察的核心是一样的,即JavaScript变量声明的相关概念,之前了解过一点,但了解的不是太深。

要谈JavaScript变量声明,就离开不了作用域的问题。而JavaScript中没有类似C,JAVA等语言中的块级作用域。如:

#include <studio.h> int main() { 	int i = 1; 	printf("d%",i); //1 	if(1){ 		int i = 2; 		printf("d%",i); //2 	} 	printf("d%",i); //1 	return 0; }
而JavaScript中相应的输出结果就变成了1,2,2。原因就是JavaScript中只有函数作用域,这也是导致JavaScript中一个经典问题的原因,即循环遍历DOM节点绑定事件后触发问题。如:

window.onload = function() { 	var oLi = document.getElementsByTagName("li"); 	for(var i=0,len=oLi.length;i<len;i++){ 		oLi[i].onclick = function() { 			alert(i); 		}; 	} };
扯得有点远,下面还是说一下JavaScript语言中的变量声明提升的问题吧。

1、当访问函数内的变量时,JavaScript会按照下面顺序查找:

(1)语言级别:默认在所用作用域下的this,arguments

(2)传入参数:函数命名的参数,作用域是当前函数体。

(3)函数声明:如题1中的function bar() {} 与 题4中的function foo() {}

(4)变量声明:如var v  与 var foo
2、变量声明与函数声明经常被JavaScript引擎隐式的提升到当前作用域的顶部。

2.1、变量声明:

局部作用域内声明变量需要加关键词var,即

function a(){ 	console.log(typeof b); 	var b = 3; }
实际上被解释成

function a(){ 	var b; 	console.log(typeof b); 	b = 3; }

而如果不加关键词var,则默认引用全局作用域内的相关变量,浏览器中即window作用域。如图:


所以如果你能理解下面代码的运行结果是a=10,则说明对变量声明部分已经足够了解。

<span style="white-space:pre">	</span>var a = 1; 	function b() { 		if(!a) { 			var a = 10; 		} 		alert(a); 	} 	b();
2.2、函数声明:我们都知道函数命名有两种方式,一种是函数声明方式function bar() {} 另外一种就是通过赋值语句的方式,即函数声明表达式var foo = function() {};

而这两种函数命名方式虽然都会出现变量声明提升的现象,但第一种提升现象会包含函数体部分一起被提升,即整个函数bar被提升。而第二种则只是简单的变量提升(想象一下将赋值语句后面的函数代码改为基本变量,如数字5,则和上一步所说的变量声明部分完全吻合)。

因此得出如下结论:

(1)JavaScript中声明语句会被提升,而赋值语句不会被提升。

(2)函数声明提升优先于变量声明提升。
现在你应该能明白阿里笔试题1中输出结果是undefined this is bar! error:undefined is not a function. 题4中的结果是function.

特此感谢以下博主的精彩博文:

harmony的专栏《2014年阿里巴巴前端工程师笔试题》

浪迹天涯《JavaScript中变量提升------Hoisting》

Nomospace《翻译——JavaScript中的变量作用域与变量声明提升》