视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
ghostwu简单易懂的javascript变量提升
2020-11-27 20:14:53 责编:小采
文档


1 a = 'ghostwu';2 var a;3 console.log( a );

对于上述的例子,你可能会认为第3行代码的输出结果应该是undefined, 因为第二行是var a; 声明变量,但是没有赋值,所以a的值是undefined, 但是正确的结果是ghostwu. 至于为什么,请继续往下看!

1 console.log( a );2 var a = 'ghostwu';

对于上面这个例子,第一行代码,你可能认为报错, 因为在输出a之前,没有定义a变量, 但是正确的结果是undefined. 嗯,好像有点莫名奇妙。

要搞清楚为什么,首先我们要明确以下2点:

  • javascript代码并不是一行一行往下执行的.

  • javascript执行分为2个步骤:

  • 编译(词法解释/预解释)

  • 执行

  • 其次,当我们碰到 var a = "ghostwu" 定义一个变量的时候, 其实js把这句话看成是2个阶段的事, var a 发生在编译阶段, a = 'ghostwu'发生在执行阶段. 然后 var a会被提升到当前作用域的最前面, a = 'ghostwu'留在原地等待执行阶段,所以:

    1 a = 'ghostwu';2 var a;3 console.log( a );4 5 //上面这段代码经过编译之后,变成下面这样6 7 var a; //被提升到当前作用域的最前面8 a = 'ghostwu'; //留在原地,等待执行9 console.log( a );
    1 console.log( a ); 
    2 var a = 'ghostwu';3 4 //上面这段代码,经过编译之后,变成下面这样5 6 var a;7 console.log( a );8 a = 'ghostwu';

    看完编译后的代码,你明白了吗?

    在接着讲下面之前,我们先明确函数常见的2种定义方式:

    1 //函数声明, 形如:2 function show(){3 console.log( '函数声明方式' );4 }5 6 //函数表达式, 形如:7 var show = function(){8 console.log( '表达式方式' );9 }

    因为表达式和函数声明,在编译阶段,会产生不同的解释效果。

    1 show();2 function show(){3 console.log( a );4 var a = 'ghostwu';5 }

    对于上面这段代码,会在编译阶段,如何解释呢?记住下面这句话就行了:

    函数声明会被提升

    所以,上面的代码,经过编译之后,就变成了下面这样:

     function show(){ //函数声明被提升到 当前作用域的最前面
     var a; //var声明被提升到当前作用域的最前面, 注意,他不会提升到函数的外面, 因为当前的作用域是在函数中 console.log( a );
     a = 'ghostwu';
     }
     show();

    所以,上面的结果就是undefined;

    对于函数表达式,是不会提升的, 看下面的例子:

     1 show(); //报错,show is not a function 2 var show = function(){ 3 console.log( 'ghostwu' ); 4 } 5 //对于上面这段表达式代码,经过编译之后: 6 var show; 7 show(); //执行之后就是 undefined(), 所以在表达式定义之前,调用函数报错了 8 show = function(){ 9 console.log( 'ghostwu' ); 
    10 }
    1 show(); //你好2 var show;3 function show(){4 console.log( '你好' );5 }6 show = function(){7 console.log( 'hello' );8 }

    上面这段代码,结果为什么会是 '你好'?

    因为: 当出现同名的函数声明,变量声明的时候, 函数声明会被优先提升,变量声明会被忽略。 所以经过编译之后,就变成:

    1 function show(){2 console.log( '你好' );3 }4 show(); //你好5 show = function(){6 console.log( 'hello' );7 }8 show();//如果这里在调用一次,就是hello, 因为show函数体在执行阶段 被 重新赋值了

    如果有同名的函数声明,后面的会覆盖前面的,如下:

     show(); console.log( 'hello' show = console.log( '你好' console.log( 'how are you!' console.log( 'how are you!' show(); show = console.log( '你好' show();
     1 //思考题: 请问下面的结果是什么? 为什么? 写下你的答案 2 show(); 3 var a = true; 4 if( a ){ 5 function show(){ 6 console.log( 1 ); 7 } 8 }else { 9 function show(){10 console.log( 2 );11 }12 }

    下载本文
    显示全文
    专题