js函数和变量的声明提升问题

最新推荐文章于 2025-03-14 20:27:57 发布

原创最新推荐文章于 2025-03-14 20:27:57 发布 · 196 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #vue.js

前端专栏收录该内容

13 篇文章

订阅专栏

本文深入探讨了JavaScript中的变量提升（hoisting）现象，包括函数声明与变量声明的提升规则，以及let和const在ES6中的块级作用域和暂时性死区。通过示例解析了不同声明方式对代码执行的影响，帮助理解JavaScript中的作用域和变量生命周期。

精进成长的本质是消除模糊。
推荐：
推荐阅读博客

var和函数的声明会被提升（赋值不会提升！）；
函数声明先提升，变量声明后提升。

		var a='apple';
        function fighting(){
            console.log(a);//undefined
            var a='angel';
            console.log(ss());//angel
            function ss(){
                return a;
            }
        }
        fighting();

相当于

        function fighting(){
            function ss(){//函数声明被提升
                return a;
            }
            var a;//变量声明被提升
            console.log(a);//undefined
            a='angel';//赋值未被提升
            console.log(ss());//angel
        }
        fighting();

例题：

		var b='boy';
        console.log(b);//boy
        function fighting(){         
            console.log(a);//undefined
            console.log(c);//undefined
            if(a==='apple'){
                a='Alice';
            }else{
                a='Ada';
            }
            console.log(a);//Ada
            var a='Andy';
            middle();
            function middle(){
                console.log(c++);//NaN
                var c=100;
                console.log(++c);//101
                small();
                function small(){
                    console.log(a);//Andy
                }
            }
            var c=a=88;
            function bottom(){
                console.log(this.b);//boy，window对象
                b='baby';
                console.log(b);//baby
            }
            bottom();
        }
        fighting();
        console.log(b);//baby，函数bottom中的b未加var声明，会覆盖全局变量的b

函数声明提升问题

例一：

fn(); // 输出 undefined

function fn() {
    console.log(a);
    var a = 1;
}

相当于

function fn() {
	var a;
    console.log(a);
    a = 1;
}
fn(); // 输出 undefined

例二：

fn(); // 报错，只提升了 var fn;  不能对 undefined 进行函数调用

var fn = function() {
    console.log("fn");
}

相当于

var fn;
fn();
fn=function() {
    console.log("fn");
}

例三：

		fn(); // 1
        var fn;

        function fn() {
            console.log(1);
        }

        fn = function() {
            console.log(2);
        }
        fn(); // 2

相当于

		function fn() {//首先提升函数
            console.log(1);
        }
        //var fn;//与函数同名会被覆盖
        fn();//1
        fn = function() {
            console.log(2);
        }
        fn();//2

尽管与函数同名的var声明会被覆盖，但是，同名的函数后面会覆盖前面的。

fn(); // 3
function fn() {
    console.log(1);
}

var fn = function() {
    console.log(2);
}

function fn() {
    console.log(3);
}

暂时性死区

let，const没有变量提升现象。会禁止在声明前使用变量。

ES6 明确规定，代码块（{}）中如果出现 let 和 const 声明的变量，这些变量的作用域会被限制在代码块内，也就是块级作用域。

		var a = 1;
        if(true){
            // 死区开始--------------------------
            // 访问 a 都会报错，不能在声明之前使用
            a = 2;
            console.log(a);
            // 死区结束--------------------------
            let a;
            console.log(a); // undefined
            
            a = 3;
            console.log(a); // 3
        }
        console.log(a);//1，不会影响块作用域之外的a的值