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 语法集锦 脚本之家基础推荐
Nov 15 Javascript
Javascript 中的 call 和 apply使用介绍
Feb 22 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 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生成网页快照 不用COM不用扩展.
2010/02/11 PHP
discuz的php防止sql注入函数
2011/01/17 PHP
php _autoload自动加载类与机制分析
2012/02/10 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
React优化子组件render的使用
2019/05/12 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
serialVersionUID具有什么样的特征
2014/02/20 面试题
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
公务员综合考察材料
2014/02/01 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
委托书的格式
2014/08/01 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书