浅谈JavaScript变量声明提升

前段时间阿里实习生内推，一面就被刷了，也是郁闷。今天系统给发通知，大致意思就是内推环节不足以了解彼此，还可以参加笔试，于是赶紧再投一次。官网流程显示笔试时间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中的变量作用域与变量声明提升》

巴特西

浅谈JavaScript变量声明提升

最新文章

热门文章