JavaScript的作用域问题

JavaScript作用域应该是JavaScript里面最难理解的概念了。看了《JavaScript高级程序设计》和其他的书虽然费了很大力气看懂了，感觉解释的还是有点费解。正好在网上看到几个面试题可以用作用域解决，也方便了对它的理解。

1.JavaScript是单线程程序

和其他语言当初设计的时候不一样，JavaScript是单线程（一个时机段内只干一件事情），是不支持并发这个概念的。为什么会这样呢？可以这样理解，假如一个线程正在创建DOM对象，然后下面一个线程将DOM对象删除了，这样矛盾吗？另外一个问题就是现在很火的Node也是单线程。非常重要的是JavaScript的单线程对页面解析而言，从上到下。傻瓜式的执行。

2.JavaScript预解析机制

先来看一个程序的执行结果：

alert(a);//function a(){alert(4);}var a = 1 ;alert(a);//1function a(){alert(2);}alert(a);//1var a = 3 ;alert(a);//3function a(){alert(4);}alert(a);//3

JavaScript解析器在解析的代码的时候可以简单的分为两个步骤（结合上述代码）：
第一步：遍历代码寻找var变量、function函数、参数
a.将所有的var变量设置为undefined

• a = undefined

b.将所有的函数体赋值给函数指针

• a = function a(){alert(2);}
• a = function a(){alert(4);}

c.整合上述两个步骤，其中+-*/%等具有运算功能进行赋值，后面的会覆盖前面的，所以上面的a、b两个步骤执行完过后就剩下：

• a = function a(){alert(4);}

第二步：逐行扫描代码
在逐行扫描的过程中，会随时查看第一步中计算的结果a = function a(){alert(4);} 同时我们知道运算符具有赋值功能，会修改变量的值，而函数不具有赋值的功能。执行第一行代码alert(a)发现第一步执行结果是a = function a(){alert(4);}所以alert(a)的结果是 function a(){alert(4);}扫描第二行var a = 1; 发现有=具有赋值功能可以修改变量的值从而将a变量修改为var a = 1;扫描第三行发现现在有var a = 1;所以alert(a)结果是1，扫描第四行代码function a(){alert(2);}发现是函数所以没有赋值的功能。无法修改变量的值。所以第五行代码alert(a)的执行结果是1。扫描第六行代码var a = 3 ;所以变量a被修改为var a = 3 ;第七行代码执行结果是3；扫描第八行代码发现是函数function a(){alert(4);}无法修改变量的值，所以下面alert(a)执行的结果是3，上面整个流程就分析完了。

（这里不探讨所谓的语法、词法这些编译原理方面的知识）

3.JavaScript作用域链的简单理解

先看下面这个笔试题目：

var str = 'jQuery';function fun(){     alert(str);//jQuery     str = 'JavaScript'; } fun(); alert(str);//JavaScript

按照上面将的两步方法进行分析，第一步：先找var变量、function函数、参数

var str = undefined
fun = fun(){………..}

第二步：逐行扫描代码第一行将变量str修改为var str = 'jQuery';第二行行数没有赋值功能，第六行是函数调用，只要发生函数调用，继续第一步寻找变量、函数和参数，发现没有var变量函数和参数，这个时候将向函数外层寻找变量，这就是作用域链的概念，里面没有继续向外层寻找变量。发现有变量var str = 'jQuery';所以结果是jQuery，向下执行代码str = 'JavaScript'操作符号可以进行赋值，发现外部有str同名变量所以有var str = 'JavaScript'，所以最后一行执行结果是JavaScript。

以上就是今天的内容，内容不多但是不是很好理解。建议多分析多思考。和实际案例结合。。。实践出真知！

相关文章

• JavaScript 开发进阶：理解 JavaScript 作用域和作用域链
• javascript变量的作用域

非常高兴和大家交流学习
自由转载，创意许可，请文章来源，来自这里
(http://blog.csdn.net/unikylin)