from me:

  javascript的变量声明具有hoisting机制,它是JavaScript一个基础的知识点,也是一个比较容易犯错的点,平时在开发中,大大小小的项目都会遇到。

  它是JavaScript引擎在执行的时候,把所有变量的声明都提升到当前作用域的最前面。

  当然了,函数声明也是可以被提升的。然后,函数表达式却没有提升。

原文:Back to Basics: JavaScript Hoisting

译文:回归基础: JavaScript 变量提升

  变量声明是所有的编程语言中最基础部分之一。然而,JavaScript 有一个怪异点,称之为变量提升(hositing),这个能够让一个看上去无关紧要的声明变成一个小bug。这篇文章解释了变量提升(hositing)是什么,以及你该如何避免这个大坑。

  JavaScript 是特别灵活的语言,几乎允许你在任何地方声明变量。比如,下方的立即执行函数表达式(IIFE)声明了2个变量,然后将他们用一个弹框显示他们。作为附注,你应该永远不要用弹框,不过我们正在这里证明这一点。

(function() {
var foo = ;
var bar = ;
var baz = ; alert(foo + " " + bar + " " + baz);
})();

  这个看上去像是一个机智的 JavaScript 代码。就像预期那样,他显示了字符串 "1 2 3"。现在,假设移动弹框位置,就下下方那样。

(function() {
var foo = ;
alert(foo + " " + bar + " " + baz);
var bar = ;
var baz = ;
})();

  如果有人真的这么写代码,那么这可能就要报错了。很显然,弹框在 bar 和 baz 声明之前发生。然而这是完全有效的 JavaScript ,这完全不会抛出异常。相反,弹框会显示 "1 undefined undefined"

  基于上一个实验,似乎你能够引用之前不存在的变量。现在,让我们做一个相同的 IIFE,但是移除 baz 声明,就想下方那样。马上,我们有个引用错误(ReferenceError),因为 baz 没有定义。

(function() {
var foo = ;
alert(foo + " " + bar + " " + baz);
var bar = ;
})();

  这真的很有趣。为了理解这里发生了什么,你需要理解变量提升(hoisting)。变量提升(hoisting)是 JavaScript 编译器的行为,将所有的变量和函数声明移至当前作用域的最高处。然而,只有声明被提升了。任何赋值行为都被留在他们所在的地方。因此,我们第二个例子 IIFE 实际上等同于以下 代码:

(function() {
var foo;
var bar;
var baz; foo = ;
alert(foo + " " + bar + " " + baz);
bar = ;
baz = ;
})();

  现在,你可以搞清楚为什么第二个例子不会抛出异常。变量提升之后(hoisting),bar 和 baz实际上在弹框之前就已经被定义了,尽管显示undefined。在第三个例子中,baz 被完全移除了。因此,没有可以提升的变量,导致弹出框抛出异常。

函数变量提升(hoisting)

  就像之前提到的那样,函数声明也是可以被提升的。然后,赋给变量的函数却没有提升。比如,在下方的代码中会像预期那样运行,因为函数声明被提升了。

foo();

function foo() {
alert("Hello!");
}

  然而,下方例子苦逼地失败了。foo 这个变量声明在函数被调用之前提升了。然后,因为foo的赋值没有提升,因此抛出了尝试调用非函数变量的异常。

foo();

var foo = function() {
alert("Hello!");
};

总结

  变量提升(hoisting)很容易理解,但是却是 JavaScript 语言中经常被忽视的细节。没有对变量提升(hoisting)有一个合适的理解,你的程序很容易有小bug。为了帮助你远离这些bug,许多开发者(和静态分析工具)提倡在每一个作用域开头放一个单独变量声明。既然这是 JavaScript 编译器如何检测你的代码的基础,那么对这条规则来说是有效的——即使我打破了规则。

回归基础: JavaScript 变量提升的更多相关文章

  1. JavaScript变量提升 面试题

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  2. JavaScript变量提升和函数声明预解析

    1.首先理解函数作用域 在JavaScript中,变量的定义并不是以代码块作为作用域的,而是以函数作用作用域的.也就是说,如果变量是在某个函数中定义的,那么它在函数以外的地方是不可见的.而如果该变量是 ...

  3. javascript变量提升

    提升是一种将变量和函数的声明移到函数作用域(如果不在任何函数内的话就是全局作用域)最顶部的机制. 提升影响了变量的生命周期,一个变量的生命周期包含3个阶段: 声明——创建一个新变量,例如var myV ...

  4. 最通俗易懂的javascript变量提升

    a = 'ghostwu'; var a; console.log( a ); 在我没有讲什么是变量提升,以及变量提升的规则之前, 或者你没有学习过变量提升,如果按照现有的javascript理解, ...

  5. javascript变量提升详解

    js变量提升 对于大多数js开发者来说,变量提升可以说是一个非常常见的问题,但是可能很多人对其不是特别的了解.所以在此,我想来讲一讲. 先从一个简单的例子来入门: a = 2; var a; cons ...

  6. JavaScript 变量提升

    变量提升(Hoisting):在ES6之前,函数声明和变量声明总是被JavaScript解释器隐式地提升(hoist)到包含他们的作用域的最顶端. 注意: 1. JavaScript 仅提升声明,而不 ...

  7. 160622、详解JavaScript变量提升

    变量在程序中随处可见.它们是一些始终在相互影响,相互作用的的数据和逻辑.正是这些互动使应用程序活了起来. 在JavaScript中使用变量很重要的一方面就是变量的提升 —— 它决定了一个变量何时可以被 ...

  8. 详解JavaScript变量提升

    变量在程序中随处可见.它们是一些始终在相互影响,相互作用的的数据和逻辑.正是这些互动使应用程序活了起来. 在JavaScript中使用变量很重要的一方面就是变量的提升 —— 它决定了一个变量何时可以被 ...

  9. 对javascript变量提升跟函数提升的理解

    在写javascript代码的时候,经常会碰到一些奇怪的问题,例如: console.log(typeof hello); var hello = 123;//变量 function hello(){ ...

随机推荐

  1. 深入JVM-有关String的内存泄漏

    什么是内存泄漏?所谓内存泄漏,就是由于疏忽或错误造成程序未能释放已经不再使用的内存的情况,他并不是说物理内存消失了,而是指由于不再使用的对象占据了内存不被释放,而导致可用内存不断减小,最终有可能导致内 ...

  2. uC/OS-II信号(OS_sem)块

    /*************************************************************************************************** ...

  3. matlab 中txt文件(含字符及数值)处理

    matlab 中txt文件(含字符及数值)处理 (2008-08-02 09:45:12) 转载▼ 标签: 杂谈 分类: matlab及C学习 Matlab文件操作及读txt文件ZZ 2008-07- ...

  4. Curl http_code 状态码 意义及信息

    shell命令:curl -I -m 10 -o /dev/null -s -w %{http_code} http://test.com curl_init — 初始化一个curl会话curl_co ...

  5. 序列化与反序列化成XML

    http://blog.itpub.net/12639172/viewspace-490786/ 现在XML都普遍的用到了很多地方,它的平台无关.方便.结构化.适用性的特点让人不得不去接受它,在C#中 ...

  6. centos 7.0 查看所有安装的包

    rpm方式安装的包 默认 最小化安装centos 7.0 rpm -qa 查看所有安装的包 [root@localhost ~]# rpm -qa biosdevname-0.5.0-10.el7.x ...

  7. Python基础之【第一篇】

    Python简介: python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语 ...

  8. Python开发【第十一篇】:JavaScript

    JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. 一.如何编写 1.J ...

  9. 并发下常见的加锁及锁的PHP具体实现代码(转)

    在最近的项目中有这样的场景 1.生成文件的时候,由于多用户都有权限进行生成,防止并发下,导致生成的结果出现错误,需要对生成的过程进行加锁,只容许一个用户在一个时间内进行操作,这个时候就需要用到锁了,将 ...

  10. Cucumber命令行接口

    1. cucumber的命令行选项 首先查看命令行选项.和其它命令行工具一样,cucumber提供了—help选项.下面是cucumber帮助的一个缩减版本: $ cucumber --help -r ...