[JavaScript]JavaScript作用域链、变量提升、|变量|函数|参数|变量提升|的优先级

Dear 丶 2022-11-27 03:15 137阅读 0赞

**一、题目代码：**

var bar=1;
        function test(){ 
            console.log(bar);
            var bar=2;
            console.log(bar);
        }
        test();
        //会输出什么？

答案和解析在下面  
↓  
↓  
↓  
↓  
↓  
↓  
↓  
↓  
↓  
↓  
↓  
↓  
↓  
↓  
↓

**二、答案：**  
![在这里插入图片描述][20200813131147696.png_pic_center]  
**三、解析：**  
js寻找变量先是在自己的域找，找不到了再去外层找  
所以当

var bar=1;
        function test(){ 
            console.log(bar);
        }
        test();

这种情况会输出1

由于var声明变量会有变量提升的现象，所以题中的情况等价于

var bar=1;
        function test(){ 
    		var bar;
    		//虽然题中没有这句，但是用var定义变量会进行变量提升
    		//会隐式的声明变量，也就相当于是有这个语句了
            console.log(bar);
            var bar=2;
            console.log(bar);
        }
        test();

所以很容易得出，在第一个console.log执行时，bar是undefined  
第二个console.log自然就是输出上一行在这个域中赋值过的bar  
值为2

var bar=1;
        function test(){ 
            console.log(bar);
            var bar=2;
            //如果题目中这里用let或const就会报错：
    		//Cannot access 'bar' before initialization
    		//let和const不会变量提升，而上一行用了bar，且在这个域找到了bar
    		//而bar在声明前就被调用了，所以会报错
            console.log(bar);
        }
        test();

**同考点题再练（答案在最下面）：**

function c(){ 
        var b=1;
        function a() { 
            console.log(b);
            var b =2;
            console.log(b);
          }
          a();
          console.log(b);
        }
        c();
        //答案undefined 2 1

**四、总结：**  
**1.由于变量提升bar的赋值可以写于声明之前，而let，const则不行  
let和const必须先声明再赋值或者声明同时赋值**

a=3;
        console.log(a); //3
        var a;
    
    	b=3;
        console.log(b);//Cannot access 'b' before initialization
        let b;
    	
    	let c=3;
        console.log(c);//3

**2.var可以重复声明，let和const不能重复声明**

let n;
    	let n=1;//Identifier 'n' has already been declared
    	
    	var p=1;
    	var p=2;//不会报错

**3.优先级：变量>函数>参数>变量提升**

function fn(bar){ 
            var bar=2;//****输出结果来自这里
            console.log(bar);
            function bar(){ 
                return "函数"
            }
        }
        fn(1);
        //输出结果为2，说明变量优先级最大

function demo(bar){ 
            console.log(bar);
            var bar=2;
        }
        demo(1);//****输出结果来自这里
        //输出结果为1，说明参数优先级大于变量提升

function fn(bar){ 
            var bar;
            console.log(bar);
            bar=2;
        }
        fn(1);//****输出结果来自这里
        //结果输出1,说明变量提升相当于这种写法

function fn() { 
            return "1"
        }
        console.log(fn());  //结果是3，对于函数来说，后者覆盖前者
                            //函数声明的位置可以放在执行语句后面
        function fn() { 
            return "2"
        }
        function fn() { 
            return "3"
        }

var fn=function (){ //fn本质上是个变量
            return "1"
        }
        function fn() { //fn本质上是个函数
            return "2"
        }
        console.log(fn());  //结果是1,变量fn优先级大于函数fn

function fn() { 
            return "2"
        }
        console.log(fn);//输出2，函数优先级大于变量提升
        var fn=function (){ 
            return "1"
        }

**4.全局变量**  
因为，在js中，如果某个变量没有var声明，会自动移到上一层作用域中去找这个变量的声明语句，如果找到，就使用，如果没找到，就继续向上寻找，一直查找到全局作用域为止，如果全局中仍然没有这个变量的声明语句，那么自动在全局作用域进行声明，这个就是js中的作用域链，也叫变量提升  
全局变量的三种声明方法：

**五、知识巩固**

↓  
↓  
↓  
↓  
↓  
↓  
↓  
↓  
↓  
↓  
↓  
↓  
↓  
↓  
**答案与解析：**

[20200813131147696.png_pic_center]: /images/20221124/3424d950ae4c4335aaf85b7816813783.png