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 相关文章推荐
利用JQuery为搜索栏增加tag提示
Jun 22 Javascript
优化 JavaScript 代码的方法小结
Jul 16 Javascript
淘宝搜索框效果实现分析
Mar 05 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
vue实现图片上传功能
May 28 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 编程的 5个良好习惯
2009/02/20 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
Javascript中的数学函数
2007/04/04 Javascript
可以支持多中格式的JS键盘
2007/05/02 Javascript
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
python获取一组汉字拼音首字母的方法
2015/07/01 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
python中最小二乘法详细讲解
2021/02/19 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
小学教师暑期培训方案
2014/08/28 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
国王的演讲观后感
2015/06/03 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
总结Pyinstaller打包的高级用法
2021/06/28 Python