回归基础: JavaScript 变量提升
from me:
javascript的变量声明具有hoisting机制,它是JavaScript一个基础的知识点,也是一个比较容易犯错的点,平时在开发中,大大小小的项目都会遇到。
它是JavaScript引擎在执行的时候,把所有变量的声明都提升到当前作用域的最前面。
当然了,函数声明也是可以被提升的。然后,函数表达式却没有提升。
原文:Back to Basics: JavaScript Hoisting
变量声明是所有的编程语言中最基础部分之一。然而,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 变量提升的更多相关文章
- JavaScript变量提升 面试题
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- JavaScript变量提升和函数声明预解析
1.首先理解函数作用域 在JavaScript中,变量的定义并不是以代码块作为作用域的,而是以函数作用作用域的.也就是说,如果变量是在某个函数中定义的,那么它在函数以外的地方是不可见的.而如果该变量是 ...
- javascript变量提升
提升是一种将变量和函数的声明移到函数作用域(如果不在任何函数内的话就是全局作用域)最顶部的机制. 提升影响了变量的生命周期,一个变量的生命周期包含3个阶段: 声明——创建一个新变量,例如var myV ...
- 最通俗易懂的javascript变量提升
a = 'ghostwu'; var a; console.log( a ); 在我没有讲什么是变量提升,以及变量提升的规则之前, 或者你没有学习过变量提升,如果按照现有的javascript理解, ...
- javascript变量提升详解
js变量提升 对于大多数js开发者来说,变量提升可以说是一个非常常见的问题,但是可能很多人对其不是特别的了解.所以在此,我想来讲一讲. 先从一个简单的例子来入门: a = 2; var a; cons ...
- JavaScript 变量提升
变量提升(Hoisting):在ES6之前,函数声明和变量声明总是被JavaScript解释器隐式地提升(hoist)到包含他们的作用域的最顶端. 注意: 1. JavaScript 仅提升声明,而不 ...
- 160622、详解JavaScript变量提升
变量在程序中随处可见.它们是一些始终在相互影响,相互作用的的数据和逻辑.正是这些互动使应用程序活了起来. 在JavaScript中使用变量很重要的一方面就是变量的提升 —— 它决定了一个变量何时可以被 ...
- 详解JavaScript变量提升
变量在程序中随处可见.它们是一些始终在相互影响,相互作用的的数据和逻辑.正是这些互动使应用程序活了起来. 在JavaScript中使用变量很重要的一方面就是变量的提升 —— 它决定了一个变量何时可以被 ...
- 对javascript变量提升跟函数提升的理解
在写javascript代码的时候,经常会碰到一些奇怪的问题,例如: console.log(typeof hello); var hello = 123;//变量 function hello(){ ...
随机推荐
- 深入JVM-有关String的内存泄漏
什么是内存泄漏?所谓内存泄漏,就是由于疏忽或错误造成程序未能释放已经不再使用的内存的情况,他并不是说物理内存消失了,而是指由于不再使用的对象占据了内存不被释放,而导致可用内存不断减小,最终有可能导致内 ...
- uC/OS-II信号(OS_sem)块
/*************************************************************************************************** ...
- matlab 中txt文件(含字符及数值)处理
matlab 中txt文件(含字符及数值)处理 (2008-08-02 09:45:12) 转载▼ 标签: 杂谈 分类: matlab及C学习 Matlab文件操作及读txt文件ZZ 2008-07- ...
- Curl http_code 状态码 意义及信息
shell命令:curl -I -m 10 -o /dev/null -s -w %{http_code} http://test.com curl_init — 初始化一个curl会话curl_co ...
- 序列化与反序列化成XML
http://blog.itpub.net/12639172/viewspace-490786/ 现在XML都普遍的用到了很多地方,它的平台无关.方便.结构化.适用性的特点让人不得不去接受它,在C#中 ...
- centos 7.0 查看所有安装的包
rpm方式安装的包 默认 最小化安装centos 7.0 rpm -qa 查看所有安装的包 [root@localhost ~]# rpm -qa biosdevname-0.5.0-10.el7.x ...
- Python基础之【第一篇】
Python简介: python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语 ...
- Python开发【第十一篇】:JavaScript
JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. 一.如何编写 1.J ...
- 并发下常见的加锁及锁的PHP具体实现代码(转)
在最近的项目中有这样的场景 1.生成文件的时候,由于多用户都有权限进行生成,防止并发下,导致生成的结果出现错误,需要对生成的过程进行加锁,只容许一个用户在一个时间内进行操作,这个时候就需要用到锁了,将 ...
- Cucumber命令行接口
1. cucumber的命令行选项 首先查看命令行选项.和其它命令行工具一样,cucumber提供了—help选项.下面是cucumber帮助的一个缩减版本: $ cucumber --help -r ...