回归基础: 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(){ ...
随机推荐
- TextView 选择文字
final CharSequence edit = text2.getText(); text2.setCursorVisible(true); text2.setOnTouchListener(ne ...
- uC/OS-II核心(Os_core)块
/*************************************************************************************************** ...
- 9.19 JS数组
数组:相同类型数据的集合强类型语言:1数组里面只能存放相同数据类型的数据 2定义数组的时候需要制定一个长度(可以存放的元素数量) 3内存空间连续集合:1.可以存放任意类型的数据 ...
- Java数据结构——优先级队列
//================================================= // File Name : PriorityQueue_demo //------------ ...
- [Redis]通过代码配置Redis
查看了文档https://azure.microsoft.com/en-us/documentation/articles/cache-how-to-scale/,发现可以使用代码来配置Redis,所 ...
- 【OpenCV】边缘检测:Sobel、拉普拉斯算子
推荐博文,博客.写得很好,给个赞. Reference Link : http://blog.csdn.net/xiaowei_cqu/article/details/7829481 一阶导数法:梯度 ...
- ecshop如何判断缓存文件是否能更新
1.打开temp->static_caches文件夹 2.点击后台“清楚缓存” 3.看static_caches文件夹里是否有文件删除 删除->可以更新缓存 否-> 不能更新缓存
- Django笔记-登陆、注册(利用cookie实现)
1.项目结构: 2.关键代码: settings.py INSTALLED_APPS = ( 'django.contrib.admin', 'django.contrib.auth', 'djang ...
- owin要跑起来
必须安装 Microsoft.Owin.Host.SystemWeb
- createStatement()的用法
createStatement()的用法 标签: 数据库concurrencyscrollsql 2012-02-24 19:58 2508人阅读 评论(0) 收藏 举报 分类: JavaEE服务器 ...