关于js变量函数提升的理解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40678503/article/details/91442789

本文深入探讨JavaScript中变量提升和函数提升的概念，通过多个实例解释变量声明如何被提升到其作用域的顶部，以及函数声明如何优先于变量声明进行提升。文章还对比了函数声明与函数表达式的区别。

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

一、变量提升

在ES6之前，JavaScript没有块级作用域(一对花括号{}即为一个块级作用域)，只有全局作用域和函数作用域。变量提升就是将变量声明提升到它所在作用域的最开始的部分。
几个例子来理解变量的提升：


console.log(a); // undefined
var a = 'global';
console.log(a); // global

实际提升的运行顺序：
 
var a; // 变量提升，全局作用域范围内，此时只是声明，并没有赋值
console.log(a); // undefined
a = 'global'; // 此时才赋值
console.log(a); // 打印出global

var a='bbb'
function fn () {
　　console.log(a); // undefined
　　var a = 'aaa';
　　console.log(a); // aaa
}
fn();

实际提升的运行顺序

var a='bbb'
function fn () {
　　var a; // 变量提升，函数作用域范围内
　　console.log(a);//undefined
　　a = 'aaa';
　　console.log(a);// aaa
}
fn();

将上面的例子函数中去掉一个var，就有很大的不同

var a='bbb';
function fn(){
    console.log(a);//bbb
    a='ccc';
    console.log(a);//ccc
}
fn();
console.log(a);//ccc

实际提升后的顺序：

var a='bbb';
function fn(){
    console.log(a) //bbb
    a='ccc' //没有var，相当于全局变量，覆盖了var a='bbb'；
    console.log(a)//ccc
}
fn();
console.log(a)//ccc;

二、函数提升

js中创建的函数有两种方式，一种是函数声明，一种是函数表达式。只有函数声明才存在函数提升。函数声明式会将函数的声明和定义一起提升到作用域的最顶上去。且如果函数声明和变量声明重名，那么函数优先级高于变量，在变量的前面。几个例子了解一下

console.log(f1); // function f1() {}   
console.log(f2); // undefined  
function f1() {}
var f2 = function() {}

if语句没有作用域：
 if("a" in window){
        var a = 10;
    }
    console.log(a); //10

 var foo = 1;
    function bar() {
        if(!foo)
        {
            var foo = 10;
        }
        console.log(foo); 
    }
    bar();//   10
    
    实际执行的顺序
    
    var foo;//变量申明提升
    function bar() {//函数申明提升
        if(!foo) //foo为undefined,!foo结果为true
        {
            var foo = 10;
        }
        console.log(foo); 
    }
    foo = 1;
    bar();//   10

console.log(a); //function(){}
var a='vvv';
var a=function(){}
console.log(a)//vvv;