翻译 – 解释JavaScript的“预解析(置顶解析)”

Posted 2021-10-11 Ya Wang

这篇文章发布于 2010年10月14日，星期四，21:34，归类于 外文翻译。 阅读 47610 次, 今日 2 次 7 条评论

 

根正苗红的引子“预解析”解释变量声明被“预解析”soga！译者补充：

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=1162

原文链接：Quick Tip: javascript Hoisting Explained
原文作者：Jeffrey Way
翻译编辑：张鑫旭

前两天我又一次看了玉伯的JavaScript运行机制浅探，以加深自己对JavaScript运行原理方面的一些理解。恰好，今天见到一篇国外的文章，就是关于“预解析”的，还有视频内容，于是决定翻译下，对自己而言算是进一步的梳理与加深认识，以下就是翻译的全部内容，为了语言的生动以及本土化要求，内容可能有所编辑。

//zxx:以下为翻译全部内容

一、根正苗红的引子

今天这个视频诞生的原因是由于回答twitter上的一个关于JavaScript“预解析”的问题。//zxx:原单词为”hoisting”，我翻译成了“预解析”，若有不准，欢迎指正。
那么什么是“预解析”？它是如何工作的？你需要知道它的那些小秘密呢？所有这些问题的回答可以从下面这个比较基础的视频教程中找到。

二、“预解析”解释

考虑下面的代码：

var myvar = \'my value\';
alert(myvar); // my value

Okay, 当然，弹出的结果肯定是"my value"，但是，跟着我，让我下面创建个方法，弹出相同的值：

var myvar = \'my value\';

(function() {
alert(myvar); // my value
})();

好吧，好吧，仍然很明显，我知道。现在，让我们加点猛的调料，在匿名函数内部创建一个同名的局部变量。

var myvar = \'my value\';

(function() {
alert(myvar); // undefined
var myvar = \'local value\';
})();

哈啊？为什么弹出的是undefined呢？即使我们声明了一个新的变量，但是它在alert的下面啊，照理说应该不会有影响啊，是吗？还是？

三、变量声明被“预解析”

在当前的作用域内，无论在哪里变量声明，在幕后，其都在顶部被“预解析”了。不过，仅声明被“预解析”。该变量即使初始化，其当前的值，在作用域的顶部，也会被设置成undefined。

恩，现在让我们好好的破译下这个“声明”和“初始化”，以var joe = \'plumber\';为模特吧。

声明(Declaration)

var joe; // the declaration

初始化(Initialization)

joe = \'plumber\'; // the initialization

现在，我们知道了这些术语的意思，就可以更好的理解到底背地里都干了些什么勾当，请看下面的伪函数：

(function() {
var a = \'a\';
// 一行代码
var b = \'b\';
// 更多行的代码
var c= \'c\'; // antipattern
// 最后一行脚本
})();

需注意，上面的这做法是不太好的。但是，先不管这个，在程序的背后，这个变量声明无论在函数作用域的什么地方，都被置顶解析了，就像下面这样：

(function() {
var a, b, c; // variables declared
a = \'a\';
// 一行代码
b = \'b\'; // initialized
// 更多行的代码
c= \'c\'; // initialized
// 最后一行脚本
})();

四、soga！

现在回到令人疑惑的undefined代码段

var myvar = \'my value\';

(function() {
alert(myvar); // undefined
var myvar = \'local value\';
})();

现在应该比较容易理解为何myvar弹出的是undefined了。正如上面学到了，当我们声明myvar变量的时候，其自动的在函数作用域的顶部（在alert的前面）进行“解析”了。结果，在alert的时候时的变量还没有被声明。然而，由于初始化的值是不会作用域置顶的，所以，最后alert的值是undefined。

//zxx:以上为翻译全文

译者补充：

上面弹出undefined的代码实际上就等效于下面的代码：

var myvar = \'my value\';

(function() {
var myvar;
alert(myvar); // undefined
myvar = \'local value\';
})();

JavaScript的预解析不仅适用于变量，似乎也适用于函数，你有兴趣可以看下下面这个例子：

g = function() { return false; };
(function() {

if(g()) {
    function g() { return true; }
    alert("in"); //IE6~8，Chrome，Safari，Opera浏览器执行
}

})();

在非Firefox浏览器下，会弹出字符串"in"的，当然，这里的重点不是哪个浏览器执不执行，所以不考虑Firefox的问题，function g() { return true; }含函数作用域顶部（在if的前面）“预解析”，所以，if语句可以执行。

本文涉及到JavaScript一些运行机制，本身资质也有限，所以文章可能有翻译或是表述不准确的地方，还望不遗余力的指正，不甚感谢。