Item6 var预解析与函数声明提升(hoist )

1、var 变量预编译

JavaScript 的语法和 C 、Java、C# 类似,统称为 C 类语法。有过 C 或 Java 编程经验的同学应该对“先声明、后使用”的规则很熟悉,如果使用未经声明的变量或函数,在编译阶段就会报错。然而,JavaScript 却能够在变量和函数被声明之前使用它们。下面我们就深入了解一下其中的玄机。

先来看一段代码:

(function() { console.log(noSuchVariable);//ReferenceError: noSuchVariable is not defined})();

运行上面代码立马就报错,不过,这也正是我们期望的,因为 noSuchVariable 变量根本就没有定义过嘛!再来看看下面的代码:

(function() { console.log(declaredLater); //undefined var declaredLater = “Now it’s defined!”; console.log(declaredLater);// “Now it’s defined!”})();

首先,上面这段代码是正确的,,没有任何问题。但是,为什么不报错了?declaredLater 变量是在调用语句后面定义的啊?为什么居然输出的是 undefined?

这其实是 JavaScript 解析器搞的鬼,解析器将当前作用域内声明的所有变量和函数都会放到作用域的开始处,但是,只有变量的声明被提前到作用域的开始处了,而赋值操作被保留在原处。上述代码对于解析器来说其实是如下这个样子滴:

(function() { var declaredLater; //声明被提前到作用域开始处了! console.log(declaredLater); // undefined declaredLater = “Now it’s defined!”; //赋值操作还在原地! console.log(declaredLater);//”Now it’s defined!”})();

这就是为什么上述代码不报异常的原因!变量和函数经过“被提前”之后,declaredLater 变量其实就被放在了调用函数的前面,根据 JavaScript 语法的定义,已声明而未被赋值的变量会被自动赋值为 undefined ,所以,第一次打印 declaredLater 变量的值就是 undefined,后面我们对 declaredLater 变量进行了赋值操作,所以,第二次再打印变量就会输出Now it’s defined!。

再来看一个例子:

var name = “Baggins”;(function () {console.log(“Original name was ” + name);// “Original name was undefined”var name = “Underhill”;console.log(“New name is ” + name);// “New name is Underhill”})();

上述代码中,我们先声明了一个变量 name ,我们的本意是希望在第一次打印 name 变量时能够输出全局范围内定义的 name 变量,然后再在函数中定义一个局部 name 变量覆盖全局变量,最后输出局部变量的值。可是第一次输出的结果和我们的预期完全不一致,原因就是我们定义的局部变量在其作用域内被“提前”了,也就是变成了如下形式:

var name = “Baggins”;(name; //注意:name 变量被提前了!console.log(“Original name was ” + name);// “Original name was undefined”name = “Underhill”;console.log(“New name is ” + name);//”New name is Underhill”})();

由于 JavaScript 具有这样的“怪癖”,所以建议大家将变量声明放在作用域的最上方,这样就能时刻提醒自己注意了。

2、函数声明“被提前”

前边说的是变量,接下来我们说说函数。

函数的“被提前”还要分两种情况,一种是函数声明,第二种是函数作为值赋值给变量,也即函数表达式。

先说第一种情况,上代码:

isItHoisted();{console.log(“Yes!”);}

如上所示,JavaScript 解释器允许你在函数声明之前使用,也就是说,函数声明并不仅仅是函数名“被提前”了,整个函数的定义也“被提前”了!所以上述代码能够正确执行。

再来看第二种情况:函数表达式形式。还是先上代码:

definitionHoisted();// “Definition hoisted!”definitionNotHoisted();a functionfunction definitionHoisted() {console.log(“Definition hoisted!”);}var definitionNotHoisted = function () {console.log(“Definition not hoisted!”);};

我们做了一个对比,definitionHoisted 函数被妥妥的执行了,符合第一种类型;definitionNotHoisted 变量“被提前”了,但是他的赋值(也就是函数)并没有被提前,从这一点上来说,和前面我们所讲的变量“被提前”是完全一致的,并且,由于“被提前”的变量的默认值是 undefined ,所以报的错误属于“类型不匹配”,因为 undefined 不是函数,当然不能被调用。

总结 通过上面的讲解可以总结如下:

3、var的副作用

隐式全局变量和明确定义的全局变量间有些小的差异,就是通过delete操作符让变量未定义的能力。

通过var创建的全局变量(任何函数之外的程序中创建)是不能被删除的。无var创建的隐式全局变量(无视是否在函数中创建)是能被删除的。

这表明,在技术上,隐式全局变量并不是真正的全局变量,但它们是全局对象的属性。属性是可以通过delete操作符删除的,而变量是不能的:

// 定义三个全局变量var global_var = 1;global_novar = 2;// 反面教材(function () { global_fromfunc = 3; // 反面教材}());global_novar; global_var;global_fromfunc; // “undefined”

在ES5严格模式下,未声明的变量(如在前面的代码片段中的两个反面教材)工作时会抛出一个错误。

4、单var形式声明变量理想的路总是为有信心的人预备着

Item6 var预解析与函数声明提升(hoist )

相关文章:

你感兴趣的文章:

标签云: