美文网首页
JavaScript中的变量提升

JavaScript中的变量提升

作者: FYW燕尾蝶 | 来源:发表于2016-08-03 20:57 被阅读0次

    请看一段下面的代码:
    var v='Hello World';
    (function(){
    alert(v);
    var v='I love you';
    })()
    如果这个是一个面试题,面试官问你这个结果是多少?你怎么回答?
    我们先看结果吧!
    结果是 undefined?和你上面自己想的一样吗?
    好吧,我就不故弄玄虚了。其实,这里面隐藏了一个陷阱-----JavaScript中的变量提升(Hoisting);
    提升,顾名思义,就是把下面的东西提到上面。在JS中,就是把定义在后面的东东(变量或函数)提升到前面中定义。
    在解释提升之前,我们先来看一下js中的作用域(scoping)问题。
    请看一段下面的代码:
    var x = 1;
    console.log(x); // 1
    if (true) {
    var x = 2;
    console.log(x); //2
    }
    console.log(x);// 2
    这是因为JavaScript是函数级作用域(function-level scope)。
    块,就像if语句,并不会创建一个新的作用域。只有函数才会创建新的作用域。
    对于这个问题有一个解决方案。如果你必须在函数中创建一个临时的作用域,请像下面这样做:
    function foo() {
    var x = 1;
    if (x) {
    (function () {
    var x = 2;
    // some other code
    })();
    }
    // x is still 1.
    }
    变量提升,就是把变量提升提到函数top的地方。变量提升,只是提升变量的声明,并不会把赋值也提升上来。
    比如:
    (function(){
    var a='One';
    var b='Two';
    var c='Three';
    })()
    实际上它是这样子的:
    (function(){
    var a,b,c;
    a='One';
    b='Two';
    c='Three';
    })()
    这个时候就把变量提升了呀。
    好,我们现在回到第一段code里面。为什么会报错呢?其实,上面代码真正变成如下:
    var v='Hello World';
    (function(){
    var v;
    alert(v);
    v='I love you';
    })()
    所以,才会提示说“undefined”。
    So,我们在写js code 的时候,需要把变量放在块级作用域的顶端,比如上面所举的例子:var a,b,c ; 防止出现意外。
    函数提升
    函数提升是把整个函数都提到前面去。
    在写js code 的时候,有2种写法,一种是函数表达式,另外一种是函数声明方式。需要重点注意的是,只有函数声明形式才能被提升。
    函数声明方式提升【成功】
    function myTest(){
    foo();
    function foo(){
    alert("我来自 foo");
    }
    }
    myTest();
    函数表达式方式提升【失败】
    function myTest(){
    foo();
    var foo =function foo(){
    alert("我来自 foo");
    }
    }
    myTest();

    相关文章

      网友评论

          本文标题:JavaScript中的变量提升

          本文链接:https://www.haomeiwen.com/subject/jjxcsttx.html