预解析：var散布的问题

最新推荐文章于 2024-07-28 20:27:10 发布

weixin_33901641

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量82

点赞数

文章标签： javascript php python ViewUI

原文链接：https://my.oschina.net/u/172808/blog/62340

版权

2019独角兽企业重金招聘Python工程师标准>>>

二、“预解析”解释

考虑下面的代码：

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一些运行机制，本身资质也有限，所以文章可能有翻译或是表述不准确的地方，还望不遗余力的指正，不甚感谢。

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=1162

转载于:https://my.oschina.net/u/172808/blog/62340