JavaScript中变量提升 Hoisting

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

[翻译]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';
})()

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

我们先看结果吧！

结果是 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();

结果如下：

左边报错了。没骗你。

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

作者：Lanny☆兰东才

赞 (0)

相关推荐

  • JavaScript的变量声明提升问题浅析(Hoisting)

    一.变量声明提升 hoisting 英['hɔɪstɪŋ] 美['hɔɪstɪŋ] n. 起重,提升 v. 把-吊起,升起( hoist的现在分词 ) 先来看一个栗子 var cc = 'hello'; function foo(){ console.log(cc); var cc = 'world'; console.log(cc); } foo(); console.log(cc); 这里将会输出 undefined.'world' .'hello' 此处主要有两个知识点: 1.作用域 2.

  • 深入解读JavaScript中的Hoisting机制

    hoisting机制 javascript的变量声明具有hoisting机制,JavaScript引擎在执行的时候,会把所有变量的声明都提升到当前作用域的最前面. 先看一段代码 var v = "hello"; (function(){ console.log(v); var v = "world"; })(); 这段代码运行的结果是什么呢? 答案是:undefined 这段代码说明了两个问题, 第一,function作用域里的变量v遮盖了上层作用域变量v.代码做少

  • 理解 JavaScript Scoping & Hoisting（二）

    Scoping & Hoisting var a = 1; function foo() { if (!a) { var a = 2; } alert(a); }; foo(); 上面这段代码在运行时会产生什么结果? 尽管对于有经验的程序员来说这只是小菜一碟,不过我还是顺着初学者常见的思路做一番描述: 1.创建了全局变量 a,定义其值为 1 2.创建了函数 foo 3.在 foo 的函数体内,if 语句将不会执行,因为 !a 会将变量 a 转变成布尔的假值,也就是 false 4.跳过条件分支,

  • JS中作用域和变量提升(hoisting)的深入理解

    JS中作用域和变量提升(hoisting)的深入理解

    作用域(Scoping) 对于Javascript初学者来说,一个最迷惑的地方就是作用域:事实上,不光是初学者.我就见过一些有经验的javascript程序员,但他们对scope理解不深.javascript作用域之所以迷惑,是因为它程序语法本身长的像C家族的语言.我对作用域的理解是只会对某个范围产生作用,而不会对外产生影响的封闭空间.在这样的一些空间里,外部不能访问内部变量,但内部可以访问外部变量. c语言的变量分为全局变量和局部变量,全局变量的作用范围是任何文件和函数访问(当然,对于非变量定

  • JavaScript中Hoisting详解 (变量提升与函数声明提升)

    JavaScript中Hoisting详解 (变量提升与函数声明提升)

    本文主要给大家介绍了关于JavaScript中Hoisting(变量提升与函数声明提升)的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 如何将 函数声明 / 变量 "移动" 到作用域的顶部. 术语 Hoisting(提升) 在很多 JavaScript 博文中被用来解释标识符的解析.其实 Hoisting(提升) 这个词是用来解释 变量 和 函数声明 是如何被提升到 函数或全局 作用域顶部的.你在任何的 JavaScript 文档中找不到这个术语,我们说的

  • JavaScript Scoping and Hoisting 翻译

    你知道下面的JavaScript代码执行后会alert出什么值吗? 复制代码 代码如下: var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); 如果答案是"10"令你感到惊讶的话,那么下面这个会让你更加困惑: [/code] var a = 1; function b() { a = 10; return; function a() {} } b(); alert(a); [/cod

  • JavaScript中变量提升 Hoisting

    JavaScript中变量提升 Hoisting

    因为我在写这文章的时候,百度里找资料,找到了园友的一篇文章,写的很好,可是我写了又不想放弃,所以就在里面拿了很多东西过来!~~ [翻译]JavaScript Scoping and Hoisting希望得到大家谅解. 一.案发现场 我们先看一段很简单的代码: 复制代码 代码如下: var v='Hello World'; alert(v); 这个没有疑问吧,弹出"Hello World".OK,我们继续. 我们在看一段Code: 复制代码 代码如下: var v='Hello Worl

  • JavaScript中变量提升与函数提升经典实例分析

    本文实例讲述了JavaScript中变量提升与函数提升.分享给大家供大家参考,具体如下: 从两个实例说起: eg1: var i; console.log(i); // 2 eg2: console.log(i); // undefined var i = 2; 1.提升 变量和函数声明从它们在代码中出现的位置被提升到了最上面. 注意: 只有声明本身会被提升,而赋值操作不会被提升. 变量会提升到其所在函数的最上面,而不是整个程序的最上面. 函数声明会被提升,但函数表达式不会被提升: func1(

  • JavaScript中变量提升和函数提升的详解

    第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函数提升 3. 为什么要进行提升 4. 最佳实践 那么,我们就开始进入主题吧. 1. 变量提升 通常JS引擎会在正式执行之前先进行一次预编译,在这个过程中,首先将变量声明及函数声明提升至当前作用域的顶端,然后进行接下来的处理.(注:当前流行的JS引擎大都对源码进行了编译,由于引擎的不同,编译形式也会有

  • JavaScript中变量提升和函数提升实例详解

    js 执行 词法分析阶段:包括分析形参.分析变量声明.分析函数声明三个部分.通过词法分析将我们写的 js 代码转成可以执行的代码. 执行阶段 变量提升 只有声明被提升,初始化不会被提升 声明会被提升到当前作用域的顶端

  • JavaScript中变量提升机制示例详解

    变量提升 JavaScript的变量提升有两种,用var声明的变量以及用function声明的变量. 用var声明的变量 我们先来看下面这段代码,a的值是多少 代码1 console.log(a); var a; 按照以往编程语言的思路来看,代码自上而下运行,按这种思路,会报错,因为执行到第2行时,变量a还没有定义,所以会报错a is not defined 然而事实上答案是undefined 好,抱着疑惑,我们看下面的代码 var a; console.log(a); 我们发现,这两段代码是一

  • 了解javascript中变量及函数的提升

    javascript中变量以及函数的提升,在我们平时的项目中其实还是挺常用的,尤其是大型项目中,不知不觉就会顺手添加一些变量,而有时候自己的不小心就会酿成一些不必要错误,趁有时间整理一下自己对于js中变量及函数提升的理解. 首先,看一个题目: console.log(a); // undefined var a = 1; console.log(a); // 1 console.log(b()); function b(){return 2;} // 2 console.log(c) //报错

  • 浅谈JavaScript中变量和函数声明的提升

    现象: 1. 在JavaScript中变量和函数的声明会提升到最顶部执行. 2. 函数的提升高于变量的提升. 3. 函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4. 匿名函数不会提升. 5. 不同<script>块中的函数互不影响. 例子: 函数声明提升高于变量声明 //同时声明变量a和函数a var a; function a() {} alert(typeof a); //显示的是"function",初步证明function的优先级高于var.

  • JavaScript中变量声明有var和没var的区别示例介绍

    本文来论述JavaScript中变量声明有var和没var的区别,关于Js中的变量声明的作用域是以函数为单位,所以我们经常见到避免全局变量污染的方法是 (function(){ // ... })(); 在函数内部,有var和没var声明的变量是不一样的.有var声明的是局部变量,没var的,声明的全局变量,所以可以借此向外暴露接口东东. 在全局作用域内声明变量时,有var 和没var看起来都一样,我们知道,声明的全局变量,就是window的属性,究竟是否一样,我们通过ECMAScrpit5提供

  • JavaScript中变量、指针和引用功能与操作示例

    本文实例讲述了JavaScript中变量.指针和引用功能与操作.分享给大家供大家参考,具体如下: 1.变量 我们可能产生这样一个疑问:编程语言中的变量到底是什么意思呢? 事实上,当我们定义了一个变量a时,就是在存储器中指定了一组存储单元,并将这组存储单元命名为a.变量a的值实际上描述的是这组存储单元中存放的具体信息. 例如,在JS中 var a; a=10; 第一个语句在存储器中指定了一组存储单元,并命名为a: 第二个语句在这组存储单元中存储了数字10. 变量a的值为10实际上是说存储单元组a存

  • JavaScript中变量的作用域详解

    JavaScript中变量的作用域详解

    一.变量的分类 在JavaScript中变量分为两种: 全局变量 局部变量 二.变量的作用域 1.局部变量的作用域 局部变量:在函数内部定义的变量称为局部变量,其作用域为该函数内部,在该函数外部不能被访问.看下面的例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co

随机推荐