Javascript中变量范围和hoist现象

最新推荐文章于 2022-11-08 15:49:16 发布

zltion

最新推荐文章于 2022-11-08 15:49:16 发布

阅读量269

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zltion/article/details/42422023

本文解析了JavaScript中的作用域概念，特别是函数作用域与全局作用域，并详细说明了变量提升（hoisting）的工作原理。通过示例展示了未声明变量的行为及局部变量如何覆盖全局变量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个还是自己记一下，在以下这篇文章中也有很好的讲解
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的解释器和调试器，在浏览器里弄略蛋疼。