理解 JavaScript(二)

28

Scoping & Hoisting

var a = 1;

function foo() {
    if (!a) {
        var a = 2;
    }
    alert(a);
};

foo();

上面这段代码在运行时会产生什么结果?

尽管对于有经验的程序员来说这只是小菜一碟,不过我还是顺着初学者常见的思路做一番描述:

  1. 创建了全局变量 a,定义其值为 1

  2. 创建了函数 foo

  3. foo 的函数体内,if 语句将不会执行,因为 !a 会将变量 a 转变成布尔的假值,也就是 false

  4. 跳过条件分支,alert 变量 a,最终的结果应该是输出 1

嗯,看起来无懈可击的推理啊,但让人惊讶的是:答案竟然是 2!为什么?

别着急,我会解释给你听。首先我要告诉你这不是什么错误,而是 JavaScript 语言解释器的一个(非官方的)特性,某人(Ben Cherry)把这个特性叫做:Hoisting(目前尚未有标准的翻译,比较常见的是提升)。


声明与定义

为了理解 Hoisting,我们先来看一个简单的情况:

var a = 1;

你是否想过,上面这句代码在运行的时候到底发生了什么?
你是否知道,就这句代码而言,“声明变量 a” 和 “定义变量 a”这两个说法哪一个才是正确的?

  • 下例叫做 “声明变量”:

var a;
  • 下例叫做 “定义变量”:

var a = 1;
  • 声明:是指你声称某样东西的存在,比如一个变量或一个函数;但你没有说明这样东西到底是什么,仅仅是告诉解释器这样东西存在而已;

  • 定义:是指你指明了某样东西的具体实现,比如一个变量的值是多少,一个函数的函数体是什么,确切的表达了这样东西的意义。

总结一下:

var a;            // 这是声明
a = 1;            // 这是定义(赋值)
var a = 1;        // 合二为一:声明变量的存在并赋值给它

重点来了:当你以为你只做了一件事情的时候(var a = 1),实际上解释器把这件事情分解成了两个步骤,一个是声明(var a),另一个是定义(a = 1)。

这和 Hoisting 有何关系?

回到最开始的那个令人困惑的例子,我告诉你解释器是如何分析你的代码的:

var a;
a = 1;

function foo() {
    var a;        // 关键在这里
    if (!a) {
        a = 2;
    }
    alert(a);     // 此时的 a 并非函数体外的那个全局变量
}

如代码所示,在进入函数体后解释器声明了新的变量 a,当时其值为 undefined,于是 if 语句条件判断结果为真,接着为新的变量 a 赋值为 2。你若不相信可以在函数体外面 alert(a),然后再执行 foo() 对比一下结果就知道了。


Scoping(作用域)

有人可能会问了:“为什么不是在 if 语句内声明变量 a?”

因为 JavaScript 没有块级作用域(Block Scoping),只有函数作用域(Function Scoping),所以说不是看见一对花括号 {} 就代表产生了新的作用域,和 C 不一样!

当解析器读到 if 语句的时候,它发现此处有一个变量声明和赋值,于是解析器会将其声明提升至当前作用域的顶部(这是默认行为,并且无法更改),这个行为就叫做 Hoisting

OK,大家都懂了,你懂了吗……

懂了不代表就会用了,就拿最开始的例子来说,如果我就是想要 alert(a) 出那个 1 可咋整呢?

创建新的作用域

alert(a) 在执行的时候,会去寻找变量 a 的位置,它从当前作用域开始向上(或者说向外)一直查找到顶层作用域为止,若是找不到就报 undefined

因为在 alert(a) 的同级作用域里,我们再次声明了本地变量 a,所以它报 2;所以我们可以把本地变量 a 的声明向下(或者说向内)移动,这样 alert(a) 就找不到它了。

记住:JavaScript 只有函数作用域!

var a = 1;

function foo() {
    if (!a) {
        (function() {        // 这是上一篇说到过的 IIFE,它会创建一个新的函数作用域
            var a = 2;       // 并且该作用域在 foo() 的内部,所以 alert 访问不到
        }());                // 不过这个作用域可以访问上层作用域哦,这就叫:“闭包”
    };
    alert(a);
};

foo();

你或许在无数的 JavaScript 书籍和文章里读到过:“请始终保持作用域内所有变量的声明放置在作用域的顶部”,现在你应该明白为什么有此一说了吧?因为这样可以避免 Hoisting 特性给你带来的困扰(我不是很情愿这么说,因为 Hoisting 本身并没有什么错),也可以很明确的告诉所有阅读代码的人(包括你自己)在当前作用域内有哪些变量可以访问。但是,变量声明的提升并非 Hoisting 的全部。在 JavaScript 中,有四种方式可以让命名进入到作用域中(按优先级):

  1. 语言定义的命名:比如 this 或者 arguments,它们在所有作用域内都有效且优先级最高,所以在任何地方你都不能把变量命名为 this 之类的,这样是没有意义的

  2. 形式参数:函数定义时声明的形式参数会作为变量被 hoisting 至该函数的作用域内。所以形式参数是本地的,不是外部的或者全局的。当然你可以在执行函数的时候把外部变量传进来,但是传进来之后就是本地的了

  3. 函数声明:函数体内部还可以声明函数,不过它们也都是本地的了

  4. 变量声明:这个优先级其实还是最低的,不过它们也都是最常用的

另外,还记得之前我们讨论过 声明定义 的区别吧?当时我并没有说为什么要理解这个区别,不过现在是时候了,记住:

Hosting 只提升了命名,没有提升定义

这一点和我们接下来要讲到的东西息息相关,请看:


函数声明与函数表达式的差别

先看两个例子:

function test() {
    foo();

    function foo() {
        alert("我是会出现的啦……");
    }
}

test();
function test() {
    foo();

    var foo = function() {
        alert("我不会出现的哦……");
    }
}

test();

同学,在了解了 Scoping & Hoisting 之后,你知道怎么解释这一切了吧?

在第一个例子里,函数 foo 是一个声明,既然是声明就会被提升(我特意包裹了一个外层作用域,因为全局作用域需要你的想象,不是那么直观,但是道理是一样的),所以在执行 foo() 之前,作用域就知道函数 foo 的存在了。这叫做函数声明(Function Declaration),函数声明会连通命名和函数体一起被提升至作用域顶部。

然而在第二个例子里,被提升的仅仅是变量名 foo,至于它的定义依然停留在原处。因此在执行 foo() 之前,作用域只知道 foo 的命名,不知道它到底是什么,所以执行会报错(通常会是:undefined is not a function)。这叫做函数表达式(Function Expression),函数表达式只有命名会被提升,定义的函数体则不会。

尾记:Ben Cherry 的原文解释的更加详细,只不过是英文而已。我这篇是借花献佛,主要是更浅显的解释给初学者听,若要看更多的示例,请移步原作,谢谢。


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

31 条评论
iSayme · 2014年05月07日

记住:JavaScript 只有函数作用域! 这句话下面的代码中那个函数不是闭包吧~
关于闭包的定义, StackOverflow上的 How do JavaScript closures work? 提到 :

That is a closure. A function doesn't have to return in order to be called a closure.  
Simply accessing variables outside of your immediate lexical scope creates a closure.

PS : 评论修改后就不支持Markdown了?

+1 回复

zhiying678 · 2014年03月09日

nice 啊 受益匪浅

回复

苏茂林 · 2014年03月27日

我执行了下第一个例子,感觉alert 中的a 是函数体中声明的变量a, 因为a 没有赋值 所以if 条件执行了,所以a 变成2 啦, 在函数体外 的变量a 没有变还是 1

回复

n͛i͛g͛h͛t͛i͛r͛e͛ 作者 · 2014年03月27日

你说的没错就是这样。如果 alert(a) 找的是外部的,那么 !afalseif 都过不去。

回复

tianshuai · 2014年05月07日

受益非浅了!

回复

pinkman · 2014年05月20日

原来还有这样的区别··

回复

Shaohua_Feng · 2014年05月20日

有意思,谢谢讲解

回复

baozailove · 2014年05月23日

学习了,非常易懂

回复

cactus_D · 2015年08月20日

最近都看了不少关于这几个概念的文章但都看得云里雾里,但作者这篇讲得简单明了,一看就懂了,真是太感谢作者啦

回复

羅聲門X · 2015年09月09日

get!受益匪浅~

回复

yujx · 2015年10月12日

受益了

回复

wuyongjun · 2015年11月11日

受益匪浅

回复

uuuu · 2015年12月18日

关键就是这一段了: "因为 JavaScript 没有块级作用域(Block Scoping),只有函数作用域(Function Scoping),所以说不是看见一对花括号 {} 就代表产生了新的作用域,和 C 不一样" 有点函数式的意思?

回复

n͛i͛g͛h͛t͛i͛r͛e͛ 作者 · 2015年12月18日

作用域就是作用域,和是否函数式没有半毛钱关系,不用把概念强加关联起来。

回复

uuuu · 2015年12月18日

为啥没有的. lambda演算.

回复

n͛i͛g͛h͛t͛i͛r͛e͛ 作者 · 2015年12月18日

非函数式编程语言也可以没有块级作用域只有函数作用域,这不是非此即彼的关系,设计语言时采取的决策而已,并且可以更改,最新的 ES 2015 已经引入块级作用域了,按你的说法这就不算函数式咯?

回复

uuuu · 2015年12月18日

算的。我刚才是在想他的内部实现是什么样的。不过块级作用域好像也可以用lambda来实现么.

回复

n͛i͛g͛h͛t͛i͛r͛e͛ 作者 · 2015年12月18日

内部实现可以参考 v8 等引擎的源码,都是开源的。

回复

请低下头 · 2016年01月26日

看了第一个例子 我觉得是这样的
/*代码解析如下 声明一个变量a 初始数值为undefined

        然后声明了一个函数foo(因为没有参数所以不进行操作了如果有参数的话那么会把参数也进行声明和变量的提升)
        然后执行函数foo
        在执行的过程中 进入判断语句  判断当前a的数值  当前a的数值是undefined 所以进入判断语句并且把a的数值赋值为2   
        然后执行alert(a)也就是2 
        到此函数执行完毕

在判断语句中并没有声明一个变量a 因为查找的事当前的作用域 也就是函数作用域 没有找到则去寻找外边 也就是window的作用域 找到了a 但是a为undefined 于是就进入了判断语句

        */

回复

请低下头 · 2016年01月26日

为什么在函数中声明了一个变量a

回复

载入中...