js使用var声明的变量与函数表达式以及形参之间的优先级

213 阅读3分钟

前言

这是我在掘金发布的第一遍文章,其实很早就有些博客的打算,但是一直没有实施,我觉得写博客对于锻炼自己的表达能力是非常有帮助的。(不喜勿喷,如文章有错误的地方欢迎纠正,万分感谢)

正文

最近在复习js高级的时候遇到了一个问题,在使用var声明的变量和函数表达式声明函数以及函数接收的形参三者之间有命名冲突的话谁的优先级是最高的呢? 我们使用代码模拟这种情况。 首先我们来对比var定义的变量和表达式定义函数。

        function func() {
            console.log(a);//a(){return 1}
            var a = 100
            console.log(a);//100
            function a() {
                return 10
            }
            console.log(a);//100
        }
        func()

难道var声明的的变量优先级比表达式高的吗? 其实不然,结合js预编译来进行分析可以得出如下代码:

      function func() {
            function a() {
                return 10
            }
            var a;//声明但未赋值
            console.log(a);//a(){return 1}
            a = 100;//将变量a赋值为100
            console.log(a);//100,上面将a变量赋值为100
            console.log(a);//100,上面将a变量赋值为100
        }
        func()  

从上可以得出,在量声明但为赋值的情况下,表达式声明的函数优先级更高,但是后面将a赋值为100,所以后面的两个输出都是100. 我们在看看使用var声明的变量与形参谁的优先级更高。

        function func(a) {
            console.log(a); 1
            var a = 100;//使用var声明变量a且赋值为100
            console.log(a);//100,上面将a变量赋值为100
        }
        func(1)

为什么第一个输出是1呢?结合预编译过程可得出一下代码:

        function func(a) {
            var a;//1
            console.log(a); 1
            a = 100;//使用var声明变量a且赋值为100
            console.log(a);//100,上面将a变量赋值为100
        }
        func(1)

在声明函数但未赋值的时候a变量值为undefined,那我们主动将a变量赋值为undefined会怎么样?

        function func(a) {
            var a = undefined;
            console.log(a); //undefined
            a = 100;//使用var声明变量a且赋值为100
            console.log(a);//100,上面将a变量赋值为100
        }
        func(1)

可以看出我们主动将a变量赋值为undefined的话,优先级也是比形参更高的。 从上可以得出在变量声明但未赋值的情况下,形参的优先级是更大的。 接下来我们对比形参和声明式声明函数。

        function func(a) {
            console.log(a); //a(){return 100}
            //声明式命名函数
            function a() {
                return 100
            };
            console.log(a);//a(){return 100}
        }
        func(1)

结合预编译过程我们可以得出以下代码:

        function func(a) {
            //声明式命名函数
            function a() {
                return 100
            };
            console.log(a); //a(){return 100}
            console.log(a);//a(){return 100}
        }
        func(1)

从上可以得出声明式命名函数优先级大于形参。 结合以上进行分析:变量声明但未赋值时的优先级最低其次是形参然后才是声明式函数。

最后祝每一位掘右都能找到心仪的工作。