Javascript的域和提升

在[url="http://zhangbo-peipei-163-com.iteye.com/blog/1734878"]这篇文章[/url]中已经简单的提到了函数和变量提升的概念。下面将更加仔细的阐述Javascript中的变量和函数的提升。


一、变量和函数提升的现象
首先思考下面的代码执行后将打印出什么？

var foo = 1;
function bar()
{
	if (!foo) 
	{
		var foo = 10;
	}
	alert(foo);
}
bar();

如果这个结果（"10"）会让你感到惊讶，那么下面的例子会不会也会让你同样的惊讶:

var a = 1;
function b() 
{
	a = 10;
	return;
	function a() {}
}
b();
alert(a);

没错，浏览器将打印"1"。这里面到底发生了什么？这看起来似乎很奇怪，危险而且很迷惑，
这事实上就是Javascript这门语言强大的、具有表现力的功能。以上的现象没有一个标准的名字，姑且就叫其为“提升”，这篇文章主要就是讲解一下Javascript的这一机制，但是在学习提升之前我们首先要了解一下Javascript的“域”，这样才能更好的理解提升。

二、Javascript的域
对于Javascript的初学者来讲，域是学习Javascript最大的疑惑，事实上很多熟练的Javascript开发人员也不是能完全的理解域，域在Javascript中如此具有迷惑性的原因是它看起来像C族语言，考虑以下的C代码：

#include <stdio.h>
int main() {
	int x = 1;
	printf("%d, ", x); // 1
	if (1) {
		int x = 2;
		printf("%d, ", x); // 2
	}
	printf("%d\n", x); // 1
}

以上代码将依次输出1,2,1，这是因为C以及其他C族语言拥有“块级域”（block-level scope）。当控制语句进入一个块，比如if语句块，我们能在这个块中声明新的变量，而不会影响外部的“域”。但在Javascript中并不是这样的，尝试在FireFox中运行以下代码：

var x = 1;
console.log(x); // 1
if (true) {
	var x = 2;
	console.log(x); // 2
}
console.log(x); // 2

以上FireFox将打印1,2,2，这是因为Javascript拥有“函数级域”（function-level scope），这是和C族语言根本上的不同，像if语句这样的块不能形成一个新的域，只有函数能创建新的域。对于很多曾经喜欢使用C，C++，C#或者Java的程序员来讲，这种现象是不希望也是不受欢迎的。幸运的是由于Javascript函数的灵活性，这一现象是可以得到弥补的，如果非要在一个函数里面再创建一个临时域，看以下例子：

function foo() {
	var x = 1;
	if (x) {
		(function () {
			var x = 2;
			// some other code
		}());
	}
	// x is still 1.
}

这个方法实际上非常的灵活，而且能够在任何你需要使用临时域的地方使用这种方法，不仅仅是在语句块中。强烈建立大家真正的花时间去理解和领会Javascript的域。它非常的强大，如果你理解了Javascript的域和提升，对你非常有意义的。

三、声明，命名和提升
在Javascript中，一个名字在一个域中创建可以通过以下四个方式之一：
1.语言自身的定义：默认所有的域都被给予this和arguments两个命名。
2.正式的参数：函数提供的域中会为该函数参数提供命名。
3.函数声明：函数提供的域会为函数体内声明的其他函数提供命名。
4.变量声明：函数提供的域会为函数体内声明的变量提供命名。
函数声明和变量声明常常会被Javascript解释器隐形的提升到包含它们的域的顶部，这就意味着像一下的代码：

function foo() {
	bar();
	var x = 1;
}

实际上更像是这样被解读的：

function foo() {
	var x;
	bar();
	x = 1;
}

这就说明，我们声明变量或者函数的那一行语句会不会被执行是没有关系的。什么意思呢？就是以下两个函数是等效的：

function foo() {
	if (false) {
		var x = 1;
	}
	return;
	var y = 1;
}
function foo() {
	var x, y;
	if (false) {
		x = 1;
	}
	return;
	y = 1;
}

需要注意的是：变量初始化的部分并没有被提升，只是变量声明的部分被提升。但是对于函数来说有两种形式：函数声明和函数表达式。对于函数表达式是和变量一样的，但对于函数声明，是将整个函数体一起提升的：

function test() {
	foo(); // TypeError "foo is not a function"
	bar(); // "this will run!"
	var foo = function () { // function expression assigned to local variable 'foo'
		alert("this won't run!");
	}
	function bar() { // function declaration, given the name 'bar'
		alert("this will run!");
	}
}
test();

这就是提升的基本原则，没有想象中的那么奇怪和复杂。其实提升的本质还是[url="http://zhangbo-peipei-163-com.iteye.com/blog/1773959"]《Javascript的函数和执行环境》[/url]
一文中讲到的Javascript的执行环境的创建问题，提升只是我们看到的直观的现象，如果要深入了解提升的本质，请参考该文。

良好的编码习惯，由于Javascript的变量提升的语言特点，如果我们在函数中到处声明变量，那完全是自讨苦吃，既然我们在哪儿声明变量都会被Javascript解释器隐式的提升到最顶部，我们为什么不直接在函数的最顶部声明我们的变量或者函数，这样既直观，看起来也整洁，也不至于产生混淆，会避免很多不必要的麻烦。

/*jslint onevar: true [...] */
function foo(a, b, c) {
	var x = 1,
		bar,
		baz = "something";
}