JS的变量提升与函数提升怎样实现?顺序是什么?

Admin 2021-10-26 群英技术资�

    今天我们来学习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)
     }

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

总结

    现在大家对于JS的变量提升与函数提升及顺序应该都有所了解了吧,上述示例能帮助大家理解很有用,有需要的朋友可以参考了解看看,希望大家阅读完这篇文章能有所收获,想要了解更多大家可以关注群英网络其它相关文章�

文本转载自脚本之� 

标签� js的变量提�

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

群英网络开启智能安全云计算之旅

注册领取新人大礼�
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务

联系我们

24小时售后 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 公司总机�0668-2555555 公司传真�0668-2555000
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部