ECMAScript Hoisting和“先有鸡还是先有蛋”

代码很简单,但是有个很有趣的东西。

 

我们都知道:JavaScript代码是由上而下,逐行解释执行的。

 

那么先看这段代码:

a = 2;

var a;

console.log( a );

控制台上会输出什么?

或许你会觉得是输出个undefined ,因为a定义声明是在a=2这个赋值声明之后的,console.log(a)的时候,a是没有赋值的,所以是undefined 。然而事实并非如此。输出是:2。

 

再看这段代码:

console.log( a );

var a = 2;

通过上面的例子:或许你觉着是输出2,或者抛ReferenceError 错。但这两个想法都是错的。输出是undefined 。

 

这两段代码阐述了一个问题:先有鸡还是先有蛋。

用JavaScript语言来提问就是:先有声明(declaration ),还是先有赋值(assignment)?

 

-------------------------------------------------------------------------------------------------------------------------------------

 

对于JavaScript来说是,先有声明。

 

如何来理解“先有声明”呢?

JavaScript代码在执行之前,会编译一下(compile first),编译的其中一部分就是,变量和函数的声明。

 

对于上面两个例子可以这样来解释:

第一段代码根据执行顺序,可以这样来理解:

第一步:

var a;

第二步:

a = 2;

console.log(a);

 

 

对于第二段代码,可以这样来理解:

第一步:

var a;

第二步:

console.log(a)//所以才undefined

a =2 ;

 

上面的这个过程就是JavaScript声明提升(Hoisting)。提升嘛,就是从底层位置到高层位置。

 

 

-------------------------------------------------------------------------------------------------------------------------------------

Hoisting的几个要点:

 

  1. 提升的是声明,赋值、可执行的代码段是不提升的。
  2. 提升是按照作用域来提升的,即声明只能提升到所在作用域的最上面。例子:
    foo();
    
    function foo() {
        console.log( a ); // undefined
    
        var a = 2;
    }
     这段代码的执行过程其实是这样的:
    function foo() {
        var a;
    
        console.log( a ); // undefined
    
        a = 2;
    }
    
    foo();
     
  3. 函数声明(Function delaration)能提升,但是函数表达式(Function expression)不能提升,例:
    foo(); // not ReferenceError, but TypeError!
    
    var foo = function bar() {
        // ...
    };
     

 

参考:

JavaScript Hoisting

 

 

 

 

 

 

 

 

 

 

-------------------------------------------------------------------------------------------------------------------------------------

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值