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 相关文章推荐
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
js实现砖头在页面拖拉效果
Nov 20 Javascript
javascript基础知识讲解
Jan 11 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
vue 请求后台数据的实例代码
Jun 22 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 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
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
php实现读取超大文件的方法
2014/07/28 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
Python提取网页中超链接的方法
2016/09/18 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
工作中的自我评价如何写好
2013/10/28 职场文书
人事文员岗位职责
2014/02/16 职场文书
保护黄河倡议书
2014/05/16 职场文书
项目负责人任命书
2014/06/04 职场文书
安全横幅标语
2014/06/09 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
钳工实训报告总结
2014/11/04 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python