JavaScript中变量提升 Hoisting


Posted in Javascript onJuly 03, 2012

因为我在写这文章的时候,百度里找资料,找到了园友的一篇文章,写的很好,可是我写了又不想放弃,所以就在里面拿了很多东西过来!~~

[翻译]JavaScript Scoping and Hoisting

希望得到大家谅解。

一。案发现场

我们先看一段很简单的代码:

var v='Hello World'; 
alert(v);

这个没有疑问吧,弹出“Hello World”。OK,我们继续。

我们在看一段Code:

var v='Hello World'; 
(function(){ 
alert(v); 
})()

经过运行之后,我们发现,还是和我们预期的一样,弹出了“Hello World”。

好了,有意思的来了。接着在看一段下面的代码:

var v='Hello World'; 
(function(){ 
alert(v); 
var v='I love you'; 
})()

如果这个是一个面试题,面试官问你这个结果是多少?你怎么回答?

我们先看结果吧!

JavaScript中变量提升 Hoisting

结果是 undefined?和你上面自己想的一样吗?

好吧,我就不故弄玄虚了。其实,这里面隐藏了一个陷阱-----JavaScript中的变量提升(Hoisting);

二。深度剖析

现在我来解释下提升是什么意思?顾名思义,就是把下面的东西提到上面。在JS中,就是把定义在后面的东东(变量或函数)提升到前面中定义。

在解释提升之前,我们先来看一下js中的作用域(scoping)问题。

对于JavaScript新手来说scoping是最令人困惑的部分之一。事实上,不仅仅是新手,我遇到或很多有经验的JavaScript程序员也不能完全理解scoping。JavaScript的scoping如此复杂的原因是它看上去非常像C系语言的成员。请看下面的C程序:

#include <stdio.h> 
int main() { 
int x = 1; 
printf("%d, ", x); // 1 
if (1) { 
int x = 2; 
printf("%d, ", x); // 2 
} 
printf("%d\n", x); // 1 
}

这段程序的输出是1,2,1。这是因为在C系语言有块级作用域(block-level scope),当进入到一个块时,就像if语句,在这个块级作用域中会声明新的变量,这些变量不会影响到外部作用域。但是JavaScript却不是这样。在Firebug中试试下面的代码:

var x = 1; 
console.log(x); // 1 
if (true) { 
var x = 2; 
console.log(x); //2 
} 
console.log(x);// 2

在这段代码中,Firebug显示1,2,2。这是因为JavaScript是函数级作用域(function-level scope)。这和C系语言是完全不同的。块,就像if语句,并不会创建一个新的作用域。只有函数才会创建新的作用域。

对于大部分熟悉C,C++,C#或是Java的程序员来说,这是意料之外并且不被待见的。幸运的是,因为JavaScript函数的灵活性,对于这个问题我们有一个解决方案。如果你必须在函数中创建一个临时的作用域,请像下面这样做:

function foo() { 
var x = 1; 
if (x) { 
(function () { 
var x = 2; 
// some other code 
}()); 
} 
// x is still 1. 
}

这种方面确实非常灵活,它使用在任何需要创建一个临时作用域的地方,不仅仅是某个块中。但是,我强烈建议你花点时间好好理解下JavaScript scoping。它实在是非常强力,而且它也是我最喜欢的语言特性之一。如果你很好的理解了scoping,理解hoisting将会更加容易。

2.1变量提升
变量提升,很简单,就是把变量提升提到函数的top的地方。我么需要说明的是,变量提升 只是提升变量的声明,并不会把赋值也提升上来。

比如:

我们定义三个变量:

(function(){ 
var a='One'; 
var b='Two'; 
var c='Three'; 
})()

实际上它是这样子的:
(function(){ 
var a,b,c; 
a='One'; 
b='Two'; 
c='Three'; 
})()

这个时候就把变量提升了呀。

好,我们现在回到第一段code里面。为什么会报错呢?其实,根据我么根据上面变量提升原件以及js的作用域(块级作用域)的分析,得知 上面代码真正变成如下:

var v='Hello World'; 
(function(){ 
var v; 
alert(v); 
v='I love you'; 
})()

所以,才会提示说“undefined”。

从这里,我们也学习到,我们在写js code 的时候,我么需要把变量放在块级作用域的顶端,比如我在上面所举的例子:var a,b,c;。防止出现意外。

2.2 函数提升
函数提升是把整个函数都提到前面去。

在我们写js code 的时候,我们有2中写法,一种是函数表达式,另外一种是函数声明方式。我们需要重点注意的是,只有函数声明形式才能被提升。

函数声明方式提升【成功】

function myTest(){ 
foo(); 
function foo(){ 
alert("我来自 foo"); 
} 
} 
myTest();

函数表达式方式提升【失败】

function myTest(){ 
foo(); 
var foo =function foo(){ 
alert("我来自 foo"); 
} 
} 
myTest();

结果如下:

JavaScript中变量提升 Hoisting

左边报错了。没骗你。

应该到这里基本都可以弄懂了。~
呵呵。。
再次谢谢Beta Rabbit

作者:Lanny☆兰东才

Javascript 相关文章推荐
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
Javascript使用integrity属性进行安全验证
Nov 07 Javascript
JavaScript Scoping and Hoisting 翻译
Jul 03 #Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 #Javascript
jquery 实现表单验证功能代码(简洁)
Jul 03 #Javascript
JavaScript中的细节分析
Jun 30 #Javascript
JavaScript中的作用域链和闭包
Jun 30 #Javascript
JavaScript中的面向对象介绍
Jun 30 #Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 #Javascript
You might like
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
让 python 命令行也可以自动补全
2014/11/30 Python
Python实现简单登录验证
2016/04/13 Python
python list元素为tuple时的排序方法
2018/04/18 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
测绘工程个人的自我评价
2013/11/23 职场文书
学生党员思想汇报
2013/12/28 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
数控专业毕业生自荐信范文
2014/03/04 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
公司会议策划方案
2014/05/17 职场文书
员工生日会策划方案
2014/06/14 职场文书
开幕式邀请函
2015/01/31 职场文书
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers