JS的变量提升与函数提升怎样完成？顺序是什么？

发布时间：2022-11-12 11:15:44 所属栏目：语言来源：

导读：　　今天我们来学习JS的变量提升与函数提升的内容，对于JS的变量提升与函数提升究竟是什么提升呢？顺序是怎样的呢？接下来我们一一的详细的了解一下。
　　
　　js 执行
　　词法分析阶段：包括分析形参、分析变量

　　今天我们来学习JS的变量提升与函数提升的内容，对于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)
　　     }

（编辑：我爱制作网_沈阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

串的定长顺序存储构架	什么叫做数组存储结构
二叉树的顺序存储结构	C++类和对象到底是哪个

JS的变量提升与函 数提升怎样完成？顺序是什么？

JS的变量提升与函数提升怎样完成？顺序是什么？