深入理解JS作用域

1:变量提升

我们先看这几段代码

  console.log(a);
    var a=15;

    b=20;
    console.log(b);
    var b;

在执行编译的时候代码开始上下文编译，var a变量提升了
console.log(a);
var a=15;
在编译的过程中，第一句是执行a,所以我们要去上下文找a,
于是上面那段代码其实编译成这样：

			  var a;  		//a变量提升上去
			  console.log(a);  //所以这样从上往下编译找到了a,但是a只定义了没有赋值
			  a=15;		

		   	b也同理
			var b;			//b变量提升上去
			 b=20;
			 console.log(b) ;//所以这样从上往下编译找到了a并且赋值了

如果理解了的话：看看下面的能不能答出

  function fn(){
    
    
      console.log(b);
      var b=1;
      console.log(b);
      function test(){
    
       
          console.log(c);
          var c=2;
      }
      test();

  }
  fn();

2:函数声明提升

	首先来看一段代码：

   fn();
       function fn(){
    
    
           console.log(1)
       }

这里输出的结果是1，不管是fn();函数的调用在前面还是后面，结果都是1，因为fn()函数变量提升到前面了

那这段代码呢

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

输出的结果为

为什么为这样呢？
这是因为在执行的过程中 var fn会变量提升

	var fn; //fn提升到上面来了
	fn();  //当执行到这里的时候就会报错，因为fn不是一个函数
	 fn=function(){
    
     
        console.log(1)
      }

2:声明提注意的事项

• 变量声明和函数声明提升变量的声明提升优先于函数的声明。但是函数的声明会覆盖未定义的同名的变量

   
 var a=10;
 function a(){
    
    
    console.log("你好")
 };
 console.log(a);// 10

 var a;
 function a(){
    
    
    console.log("你好")
 };
 console.log(a); //function a()