JavaScript中变量提升和函数提升实例详解

更新时间：2021年07月07日 10:53:58 作者：无语听梧桐_AprilTong

这篇文章主要给大家介绍了关于JavaScript中变量提升和函数提升的相关资料,以及JS变量提升和函数提升的顺序,文中给出了详细的介绍,需要的朋友可以参考下

js 执行

词法分析阶段：包括分析形参、分析变量声明、分析函数声明三个部分。通过词法分析将我们写的 js 代码转成可以执行的代码。
执行阶段

变量提升

只有声明被提升，初始化不会被提升
声明会被提升到当前作用域的顶端

🌰 1:

console.log(num)
var num
num = 6

预编译之后

var num
console.log(num) // undefined
num = 6

🌰 2:

num = 6
console.log(num)
var num

预编译之后

var num
num = 6
console.log(num) // 6

🌰 3:

function bar() {
    if (!foo) {
        var foo = 5
    }
    console.log(foo) // 5
}
bar()

预编译之后

function bar() {
    var foo // if语句内的声明提升
    if (!foo) {
        foo = 5
    }
    console.log(foo)
}
bar()

函数提升

函数声明和初始化都会被提升
函数表达式不会被提升

🌰 1: 函数声明可被提升

console.log(square(5)) // 25
function square(n) {
    return n * n
}

预编译之后

function square(n) {
    return n * n
}
console.log(square(5))

🌰 2: 函数表达式不可被提升

console.log(square) // undefined
console.log(square(5)) // square is not a function
var square = function(n) {
    return n * n
}

预编译之后

var square
console.log(square)
console.log(square(5))
square = function() {
    return n * n
}

🌰 3:

function bar() {
    foo() // 2
    var foo = function() {
        console.log(1)
    }
    foo() // 1
    function foo() {
        console.log(2)
    }
    foo() // 1
}
bar()

预编译之后：

function bar() {
    var foo
    foo = function foo() {
        console.log(2)
    }
    foo() // 2
    foo = function() {
        console.log(1)
    }
    foo() // 1
    foo() // 1
}

函数提升在变量提升之前

🌰 1:

console.log(foo) // 会打印出函数

function foo() {
    console.log('foo')
}
var foo = 1

🌰 2:

var foo = 'hello' // hello
;(function(foo) {
    console.log(foo)
    var foo = foo || 'world'
    console.log(foo) //hello
})(foo)
console.log(foo) // hello

预编译之后

var foo = 'hello'
;(function(foo) {
    var foo
    foo = 'hello' // 传入参数的foo值
    console.log(foo) // hello
    foo = foo || 'world' // foo有值为hello，所以没有赋值为world
    console.log(foo) // hello
})(foo)
console.log(foo) // hello, 打印的事全局作用域下的var foo = 'hello'

JS变量提升和函数提升的顺序

最近笔试时碰到考察变量提升与函数提升顺序的一道题目，之前只知道var定义的变量会有变量提升以及函数声明也会提升，但没有深入研究他们的顺序以及详细过程。事后查阅资料加上自己的验证，得出了自己对于它们顺序的一些理解，话不多说，直接进入正题。

首先给出我的结论：函数提升优先级高于变量提升，且不会被同名变量声明时覆盖，但是会被同名变量赋值后覆盖

大家可以看下面这段代码：

     console.log(a) // ƒ a(){}  变量a赋值前打印的都会是函数a
     var a=1;
     function a(){}
     console.log(a) // 1    变量a赋值后打印的都会是变量a的值

首先变量和函数声明都提升，但函数提升优先级高于变量，都提升后变量只是定义没有赋值，所以输出的是函数a。详细过程如下：

     function a(){}  // 函数声明提升 a-> f a (){}
     var a;        // 变量提升
     console.log(a)  // 此时变量a只是声明没有赋值所以不会覆盖函数a --> 输出函数a  f a (){}
     a=1;     //变量赋值
     console.log(a)  // 此时变量a赋值了 --> 输出变量a的值 1

总结：由于函数声明和变量都会提升，如果函数与变量同名，那么只要在变量赋值前打印的都会是函数，在变量赋值之后打印都是变量的值。

现在让我们再看一段代码：

     a();  // 2
     var a = function(){  // 看成是一个函数赋值给变量a
        console.log(1)
     }
     a(); // 1
     function a(){
        console.log(2)
     }
     a(); // 1

其实只是想告诉大家只有函数声明才会提升函数表达式不会提升，所以在函数表达式后面的代码会输出1，因为变量a赋值后把提升的函数a覆盖了。详细过程如下：

     function a(){      // 函数提升
         console.log(2)
     }
     var a;   // 变量提升
     a();    // 2  
     a = function(){    // 变量a赋值后覆盖上面的函数a
         console.log(1)
     }
     a(); // 1
     a(); // 1

再看一段代码：

     a();
     function a(){
         console.log(1)
     }
     function a(){
         console.log(2)
     }

打印的是2，道理很简单先声明的会被后声明的覆盖。

总结

到此这篇关于JavaScript中变量提升和函数提升的文章就介绍到这了,更多相关js变量提升和函数提升内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
这篇文章主要介绍了JS实现的将html转为pdf功能,结合完整实例形式分析了基于浏览器端插件jsPDF实现的HTML格式数据转换成pdf具体操作技巧,需要的朋友可以参考下
2018-02-02
原生js的RSA和AES加密解密算法
这篇文章主要为大家详细介绍了原生js的RSA和AES加密解密算法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
一文带你掌握JavaScript中的箭头函数
在JavaScript中，箭头函数是一种简化的函数语法，它在ES6（ECMAScript 2015）引入，本文就来和大家深入讲讲JavaScript中的箭头函数的使用吧
2023-05-05
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
这篇文章主要介绍了微信小程序MUI导航栏透明渐变功能,结合实例形式分析了通过改变rgba的a值实现透明度渐变功能的相关操作技巧,需要的朋友可以参考下
2019-01-01
28个JavaScript常用字符串方法以及使用技巧总结
这篇文章主要给大家介绍了28个JavaScript常用字符串方法以及使用技巧的相关资料,文中统计的方法都非常实用,无论是日常工作还是面试,都建议多看一看,需要的朋友可以参考下
2021-09-09
ECMAScript中迭代器的深入讲解
在ECMAScript 6增加了一个对象,它不是新的语法或新的内置对象,而一种协议（迭代器协议）,所有遵守这个协议的对象,都可以称之为迭代器,这篇文章主要给大家介绍了关于ECMAScript中迭代器的相关资料,需要的朋友可以参考下
2021-08-08
js动态设置div的值下例子
设置div的值想必大家都会吧，按要说动态设置想必知道的人及寥寥无几了，下面有个不错的示例，希望对大家有所帮助
2013-10-10
js单页hash路由原理与应用实战详解
本篇文章主要介绍了js单页hash路由原理与应用实战详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
JS实现动态加载样式和脚本
在前端开发的过程中,不可避免的需要根据前置条件动态加载样式和脚本文件,本文小编就来简单为大家介绍一下实现一下动态加载样式和脚本文件的方法吧
2023-09-09
如何用JavaScript让你的浏览器说话
这篇文章主要介绍了如何用JavaScript让你的浏览器说话，对语音感兴趣的同学，可以实验一下
2021-04-04