五个小例子教你搞懂 JavaScript 作用域问题

众所周知，JavaScript 的作用域和其他传统语言（类C）差别比较大，掌握并熟练运用JavaScript 的作用域知识，不仅有利于我们阅读理解别人的代码，也有助于我们编写自己的可靠代码。

下面笔者将使用五个小例子来给大家分析下 JavaScript 的作用域要注意的问题。

感谢例子的来源 (这5个例子我做错了2个 [嘿嘿，尽情鄙视吧]，笔者就是要 死磕自己，奉献大家!)

先给出五个例子：

每个例子旁边都会给出答案的链接，如果你全部都正确了，你可以忽略这篇短文，并深深的鄙视下笔者。

例一: 答案

if (!("a" in window)) {
    var a = 1;
}
alert (a);

例二：答案

var a = 1,
    b = function a (x) {
        x && a (--x);
    };
alert (a);

例三：答案

function a (x) {
    return x * 2;
}
var a;
alert (a);

例四：答案

function b (x, y, a) {
    arguments[2] = 10;
    alert (a);
}
b(1, 2, 3);

例五：答案

function a () {
    alert (this);
}
a.call (null);

写在答案前面的话：

页面中JavaScript代码在加载的时候，执行顺序是按照脚本标签<script>的顺序一致的，但如果设置该标签async或defer属性的话，则不能保证执行顺序（这点说起来惭愧，笔者没有认真测试过）。

JS代码在解释执行前，会对进行一次“预编译”：

在预编译的过程中，用var声明的变量被设置为活动对象（啥是活动对象？）的属性，默认值为“undefined”，

以function定义的函数也被添加为活动对象的属性，它们的值就是函数的定义，匿名函数将不被解析(这句话啥意思？)。

变量初始化过程即赋值过程发生在解释执行期，而不是"预编译期"。

例一答案：

有人大概会犯下面两种情况的错误：

情况一：if 分支里声明a变量（var a = 1;），在if 外访问不到变量a，所以对话框弹出 'undefined'。

这说明你对JavaScript 中没有块级作用域不太理解。请翻翻基础书籍。笔者也会在后续的博文中深入浅出地介绍JavaScript 变量、作用域和内存问题。（到时候会给出链接的）

情况二：a 变量，不在window对象中，所以进入if 分支，声明 a 并赋值为 1，又由于JS没有块作用域，所以对话框弹出 1。

这说明你大概了解块作用域（可能只是知道，但并不知道原理）。这时候你可能需要了解下啥是作用域链，多问问为什么没有块作用域（后续博文会推出的，但笔者仍希望你通过读书的方式了解下）。

但是你还是对JS代码执行前的情况不太了解。

真正的情况是这样的:

JS在预编译的时候，var 声明的变量被设置为活动对象(本例为 window )的属性，默认值是‘undefined’,

由于没有块作用域，所以if 块中的变量声明被预编译了，因此 a 是window的属性 (a in window is true ) ,于是就能理解对话框弹出 'undefined'.

例二答案：

错误的情况我就不多做介绍了，无非是弹出函数b的定义，或者弹出1。

下面解释下本例的情况，本例的代码执行和下列代码执行是一样的：

var a  = 1;
var b = function a (x) {
    x && a (--x);
};
alert (a);

第一行是一个变量的声明。

第二行是函数字面量(函数表达式，详细用法请参见：深入浅出 JavaScript 函数 v 0.5)，只不过该表达式没有省略函数名(a),为什么不省略呢？因为该函数要递归啊，不然咋递归？

但是残酷的是，函数名在函数外部是未定义的，所以对话框弹出的是 1 。

针对本例还有一种说法是逗号操作符，不知道是顺序的还是倒序的，但是针对本例，顺序还是逆序，真没什么关系。

例三答案：

本例错误的大部分情况都是弹出'undefined'.

错误的原因就是不太了解JS的预编译过程。

本例中JS的预编译过程是这样的，首先声明变量 a （并未初始化哟）,然后再初始化为function, 后面 var a ; 只是声明变量，但是并未给a 赋值，所以其值还是function。

拿下面一段代码做比较，可以印证上面的解释：

function a (x) {
    return x * 2;
}
var a = 10;
alert (a);

谁最后对同一个变量初始化(可以理解成赋值)，最后变量就保留谁的值。

例四答案：

理解本例的关键在于对参数对象的理解，arguments 的详细介绍，在深入浅出 JavaScript 函数 v 0.5中有详细的介绍。

arguments 是一个特殊的对象，有数组的特性，但不是数组，arguments 对象不是只读的，arguments [2] = 10;

这句话就把参数 a (其实可以理解成是函数的内部变量) 更改为10，所以弹出 10。

arguments [2] 和 a 指向的是同一个值。

例五答案：

a 作为一个函数，在JS中函数也是对象，对象当然有属性和方法了。

JavaScript 就为函数对象提供了两个间接调用函数的方法 call() 和apply()，这两个内容的详细解释在深入浅出 JavaScript 函数 v 0.5中有详细的介绍。

call () 方法的语法是这样的：

call([thisObj[,arg1[, arg2[, [,.argN]]]]])    // thisObj 是this要绑定的对象，后面是逗号分隔开的参数

第一个参数是函数要执行的作用域（也就是说第一个参数都会变为this值），哪怕传入的参数是原始值或者null或undefined，在非严格模式下，传入的null和undefined都会被替换成全局对象，其他的原始值则会被响应的包装对象所替代。本例中传入null ，所以会替换成全局对象(window对象)，因此对话框弹出 [Object Window] 。

本例中涉及的 this 的用法，请参见深入浅出 JavaScript 函数 v 0.5 。

写在后面的话：

什么是活动对象？

当函数被调用，活动对象(activation object) 就被创建了。它包含普通参数(formal parameters) 与特殊参数(arguments)对象(具有索引属性的参数映射表)。

活动对象在函数上下文中作为变量对象使用。

预编译阶段，匿名函数将不会被解析。这句话的理解：

一句话，函数声明在"预编译阶段"被解析，函数字面量(函数表达式) 在执行阶段被解析。

例子：

alert (add (2,3));    //
function add(a,b) {
    return a+b;
}    // 函数声明提升
//=====为了方便，笔者写在了一起，在测试的时候，可不要在一个作用域中执行哟===============
alert (add (2,3));    //error
var add = function (a,b) {
    return a+b;
}; //函数字面量，注意结尾的分号哟（细节很重要）。

广了个告：：(祝大家劳动节快乐，为我们这些劳动者鼓掌)

更过关于函数的内容，尽在深入浅出 JavaScript 函数 v 0.5

更多内容尽在这里：相关博客一览表