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. TextView 选择文字

    final CharSequence edit = text2.getText(); text2.setCursorVisible(true); text2.setOnTouchListener(ne ...

  2. uC/OS-II核心(Os_core)块

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

  3. 9.19 JS数组

    数组:相同类型数据的集合强类型语言:1数组里面只能存放相同数据类型的数据     2定义数组的时候需要制定一个长度(可以存放的元素数量)     3内存空间连续集合:1.可以存放任意类型的数据     ...

  4. Java数据结构——优先级队列

    //================================================= // File Name : PriorityQueue_demo //------------ ...

  5. [Redis]通过代码配置Redis

    查看了文档https://azure.microsoft.com/en-us/documentation/articles/cache-how-to-scale/,发现可以使用代码来配置Redis,所 ...

  6. 【OpenCV】边缘检测:Sobel、拉普拉斯算子

    推荐博文,博客.写得很好,给个赞. Reference Link : http://blog.csdn.net/xiaowei_cqu/article/details/7829481 一阶导数法:梯度 ...

  7. ecshop如何判断缓存文件是否能更新

    1.打开temp->static_caches文件夹 2.点击后台“清楚缓存” 3.看static_caches文件夹里是否有文件删除 删除->可以更新缓存 否-> 不能更新缓存

  8. Django笔记-登陆、注册(利用cookie实现)

    1.项目结构: 2.关键代码: settings.py INSTALLED_APPS = ( 'django.contrib.admin', 'django.contrib.auth', 'djang ...

  9. owin要跑起来

    必须安装 Microsoft.Owin.Host.SystemWeb

  10. createStatement()的用法

    createStatement()的用法 标签: 数据库concurrencyscrollsql 2012-02-24 19:58 2508人阅读 评论(0) 收藏 举报  分类: JavaEE服务器 ...