理解 JavaScript（二）

luxixing 发布于2019-08-19 14:24 / 1210人阅读

摘要：所以形式参数是本地的，不是外部的或者全局的。这叫做函数声明，函数声明会连通命名和函数体一起被提升至作用域顶部。这叫做函数表达式，函数表达式只有命名会被提升，定义的函数体则不会。

Scoping & Hoisting

var a = 1;

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

foo();

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

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

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

创建了函数 foo

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

跳过条件分支，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 中，有四种方式可以让命名进入到作用域中（按优先级）：

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

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

函数声明：函数体内部还可以声明函数，不过它们也都是本地的了

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

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

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 的原文解释的更加详细，只不过是英文而已。我这篇是借花献佛，主要是更浅显的解释给初学者听，若要看更多的示例，请移步原作，谢谢。

专线服务 idc机房托管 javascript理解如何理解javascript 深入理解javascript 全面理解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/77967.html

谈谈javascript语法里一些难点问题（二）

摘要：讲作用域链首先要从作用域讲起，下面是百度百科里对作用域的定义作用域在许多程序设计语言中非常重要。原文出处谈谈语法里一些难点问题二 3) 作用域链相关的问题作用域链是javascript语言里非常红的概念，很多学习和使用javascript语言的程序员都知道作用域链是理解javascript里很重要的一些概念的关键，这些概念包括this指针，闭包等等，它非常红的另一个重要原因就...

Enlightenment 2019-08-21 10:27 评论0 收藏0
细说 Javascript 对象篇（二） : 原型对象

摘要：并没有类继承模型，而是使用原型对象进行原型式继承。我们举例说明原型链查找机制当访问一个对象的属性时，会从对象本身开始往上遍历整个原型链，直到找到对应属性为止。原始类型有以下五种型。此外，试图查找一个不存在属性时将会遍历整个原型链。 Javascript 并没有类继承模型，而是使用原型对象 prototype 进行原型式继承。尽管人们经常将此看做是 Javascript 的一个缺点，然...

lansheng228 2019-08-19 14:40 评论0 收藏0
JavaScript对象的深入理解（二）

摘要：原型的概念不同于构造函数模式创建对象只能单级即成，得益于原型链的概念，原型模式可实现类似其他语言的多级继承。组合使用构造函数与原型模式单一使用原型对象的问题在于所有属性皆共享，若不想共享某属性，则可放入构造函数中。之前提到，构造函数方法创建对象存在着方法不共享的问题，因此引申出了原型模式创建对象原型模式原型模式旨在创建一个模版对象，该对象的所有属性和方法被其实例所共享。原型的概...

tommego 2019-08-21 17:24 评论0 收藏0
由ES规范学JavaScript(二)：深入理解“连等赋值”问题

摘要：有这样一个热门问题其实这个问题很好理解，关键要弄清下面两个知识点引擎对赋值表达式的处理过程赋值运算的右结合性一赋值表达式形如的表达式称为赋值表达式。赋值表达式是右结合的。有这样一个热门问题： var a = {n: 1}; var b = a; a.x = a = {n: 2}; alert(a.x); // --> undefined alert(b.x); // --> {n: ...

JasonZhang 2019-08-19 17:18 评论0 收藏0
JavaScript Bitwise NOT Operator

摘要：心血来潮地跑到做了个，结果当然是惨不忍睹，发现自己对不少的基础知识的理解是模模糊糊，甚至是错的。读到又琢磨了一会儿，才搞明白为啥补码这么反直觉。二补码只能脑补，或者用代码打印脑补的内容。写了半天，一言以蔽之相当于调用参考链接心血来潮地跑到Upworks做了个JavaScript Test，结果当然是惨不忍睹，发现自己对不少JavaScript的基础知识的理解是模模糊糊，甚至是错的。 ...

zengdongbao 2019-08-22 11:19 评论0 收藏0