JavaScript中变量提升------Hoisting
原谅链接:http://www.cnblogs.com/damonlan/archive/2012/07/01/2553425.html
因为这个问题很是经典,而且容易出错,所以在介绍一次。哈哈。莫怪哦。
一。案发现场
我们先看一段很简单的代码:
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';
})()
如果这个是一个面试题,面试官问你这个结果是多少?你怎么回答?
我们先看结果吧!
结果是 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的更多相关文章
- javascript中变量提升的理解
网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...
- JavaScript中变量提升是语言设计缺陷
首先纠正下,文章标题里的 “变量提升” 名词是随大流叫法,“变量提升” 改为 “标识符提升” 更准确.因为变量一般指使用 var 声明的标识符,JS 里使用 function 声明的标识符也存在提升( ...
- Javascript中变量提升的问题
一.函数声明变量提升 函数声明具有变量提升的问题,所以在函数被声明之前就可以访问. //else中的语句相当于将if中的function重写,因此无论flag为何值,返回的方法始终为重写后的方法. / ...
- Javascript中变量提升的问题(五)
一.函数声明变量提升 函数声明具有变量提升的问题,所以在函数被声明之前就可以访问. console.log(getValue()); function getValue() { return 'a ...
- 关于javascript中变量及函数的提升
javascript中变量以及函数的提升,在我们平时的项目中其实还是挺常用的,尤其是大型项目中,不知不觉就会顺手添加一些变量,而有时候自己的不小心就会酿成一些不必要错误,趁有时间整理一下自己对于js中 ...
- JavaScript中变量和函数声明的提升
现象: 1.在JavaScript中变量和函数的声明会提升到最顶部执行. 2.函数的提升高于变量的提升. 3.函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4.匿名函数不会提升. ...
- JavaScript 中变量、作用域和内存问题的学习
这是我学习JavaScript的第二篇文章,之前做过几年的Java开发,发现JavaScript虽然也是面向对象的语言但是确实有很多不同之处.就本篇博客,主要学习总结一下最近学习到的JavaScrip ...
- JavaScript中变量声明有var和没var的区别
JavaScript中变量声明有var和没var的区别 JavaScript中有var和没var的区别 Js中的变量声明的作用域是以函数为单位,所以我们经常见到避免全局变量污染的方法是 (functi ...
- JavaScript中变量的LHS引述和RHS引用
JavaScript中变量的LHS引述和RHS引用 www.MyException.Cn 网友分享于:2015-02-04 浏览:0次 JavaScript中变量的LHS引用和RHS引用 在Jav ...
随机推荐
- EF 性能调优
--EF 批量增删改 http://www.cnblogs.com/lori/archive/2013/01/31/2887396.html http://www.cnblogs.com/gzalrj ...
- 【紫书】【重要】Not so Mobile UVA - 839 递归得漂亮
题意:判断某个天平是否平衡,输入以递归方式给出. 题解:递归着输入,顺便将当前质量作为 &参数 维护一下,顺便再把是否平衡作为返回值传回去. 坑:最后一行不能多回车 附:天秀代码 #defin ...
- Oracle安装部署之RedHat安装Oracle11g_R2
硬件配置 内存 :≥1G 硬盘空间:≥10G 上传oracle11g安装包: putty上用wcw用户登录,通过ftp服务上传oracle安装文件到/home/wcw目录下解压 #unzip linu ...
- mysql主从服务器的配置
使用mysql主从复制的好处有: 1.采用主从服务器这种架构,稳定性得以提升.如果主服务器发生故障,我们可以使用从服务器来提供服务. 2.在主从服务器上分开处理用户的请求,可以提升数据处理效率. 3. ...
- 【pip uninstall 无法卸载】Not uninstalling numpy at /usr/lib/python2.7/dist-packages, outside environment /usr
想卸载python的库numpy,执行pip uninstall gunicorn,报错如下: Not uninstalling numpy at /usr/lib/python2.7/dist-pa ...
- CF750F New Year and Finding Roots 构造+树论
正解:构造 解题报告: 传送门! 交互题交互题!哇好新鲜啊QwQ 首先考虑最傻逼的做法,应该是每个人都能想到的 首先看一下它给的条件,考虑到完全二叉树的性质,就可以发现,如果给的邻居只有一个,说明是叶 ...
- CentOS VmwareTools安装
1. 虚拟机菜单栏--虚拟机--安装VMware tools 2. CentOS系统中弹出的VMware tools窗口中--右击VMwaretools.tar.gz--Extract到桌面 3.打开 ...
- java-小技巧-001-Long序列化到前端js不支持
1.引入:jackson-mapper-asl-1.9.2.jar 2.导入: import org.codehaus.jackson.map.annotate.JsonSerialize;impor ...
- 使用对象作为hashMap的键,需要覆盖hashcode和equals方法
1:HashMap可以存放键值对,如果要以对象(自己创建的类等)作为键,实际上是以对象的散列值(以hashCode方法计算得到)作为键.hashCode计算的hash值默认是对象的地址值. 这样就会忽 ...
- sklearn_SVM
一.用SVM实现二分类: 支持向量机分类器,是在数据空间中找出一个超平面作为决策边界,利用这个决策边界来对数据进行分类,并使分类误差尽量小的模型 ...