JavaScript 中的 Hoisting 机制

JavaScript 中的 Hoisting 一般称之为变量声明提升机制。就是说,JavaScript 引擎在执行的时候,会把所有变量的声明都会被提升到当前作用域的最前面,注意,这里被提升的仅仅是声明。怎么理解呢,看下面例子:

var myval = "my global var";
(function() {
	console.log(myval); // log "my global var"
})();

以上代码很显然会输出 "my global var",但是如果我们把以上代码按如下方式稍加修改:

var myval = "my global var";
(function() {
	console.log(myval); // log "undefined"
	var myval = "my local var";
})();

执行结果是输出了一个 undefined,出现这个结果的原因就是变量的声明被提升了,以上代码等同如下:

var myval = "my global var";
(function() {
	var myval;
	console.log(myval); // log "undefined"
	myval = "my local var";
})();

被提升的仅仅是变量的声明部分,并没有立即初始化,所以会输出 undefined

然而这种提升机制,不仅仅表现于在普通的变量,同时也表现在函数上。例如下面这段代码并不能被正确执行:

(function() {
	fun(); // Uncaught TypeError: undefined is not a function
	var fun = function() {
		console.log("Hello!");
	}
})();

因为它等价于:

(function() {
	var fun;
	fun(); // Uncaught TypeError: undefined is not a function
	fun = function() {
		console.log("Hello!");
	}
})();

因为函数的声明同样被提升而没有立即初始化,所以会出错。

当然,这种定义函数的方式称之为“函数表达式”,会有提升机制,如果是如下的这种“函数声明”方式,则完全没有提升机制方面的问题:

(function() {
	fun();
	function fun() {
		console.log("Hello!");  // log "Hello!"
	}
})();

这也是函数声明与函数表达式的主要区别。

Posted on 2012-12-24

No Comments

Leave a Comment