Javascript中变量范围和hoist现象

这个还是自己记一下,在以下这篇文章中也有很好的讲解
http://www.kenneth-truyers.net/2013/04/20/javascript-hoisting-explained/

Javascript中没有block scope,只有函数全局两个范围。
在函数中部声明的变量会被隐式的提升(hoist)到函数头部,比如以下代码

function test() {
    alert(a); // undefined, 注意不是ReferenceError
    while (true) {
        var a = 5;
        break;
    }
    alert(a); // 5
}
test();

这里能两个都能alert出来没有错误是因为,这段代码等同于如下代码

function test() {
    var a; // 把函数中所有局部变量的声明都提升到头部
    alert(a);
    while (true) {
        a = 5;
        break;
    }
    alert(a);
}
test();

这里就要非常小心这种被隐式提升的局部变量和全局变量的一些冲突了,比如下面这段代码

var bird = 'sparrow';
function test() {
    if (typeof bird === 'undefined') {
        var bird = 'pigeon';
    } 
    alert(bird); // pigeon
}
test();

很奇怪吧为什么alert出来是pigeon而不是sparrow, 因为局部变量bird把全局变量遮盖了。而在if语句之前,局部变量bird确实是undefined。
不得不说这很tricky。

顺便有个网站能在线执行js,http://jsfiddle.net
不过一直没发现有好的js的解释器和调试器,在浏览器里弄略蛋疼。

    原文作者:wangdai
    原文地址: https://segmentfault.com/a/1190000000660056
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞