JavaScript—作用域与作用域链

1.作用域

 1. 理解：
    *作用域理解为一块"地盘"，一个代码段所在的区域；
    *它是静态的，在编写代码时就确定了；
 2.分类：
    *全局作用域
    *函数作用域
    *ES5中没有块作用域(到ES6中才有)
 3.作用：
    *隔离变量，不同作用域下同名变量不会有冲突；

```handlebars
<script type="text/javascript">	   
		if(true){           //执行区域{}就是一个块作用域；
			var c=3;      
		}
		console.log(c);
		
	    //下列有几个作用域？  答：n(函数个数)+1(全局)  2+1=3个
	    var a=10;
	    b=20;
	    function fn(x){
	    	var a=100;
	    	c=300;
	    	console.log("fn()",a,b,c,x);      //fn(),100,20,300,10
	        function bar(x){      
	        	var a=1000;
	        	d=400;
	        	console.log("bar()",a,b,c,d,x);   //bar(),1000,20,300,400,200
	        }                  
	     bar(100);
	     bar(200);
	    };
	     fn(10);
	</script>

2.作用域与执行上下文

 区别1：创建的时间不同
   *全局作用域之外，每个函数的作用域在函数定义时就已经确定了，而不是在函数调用时；
   *全局执行上下文，是在全局作用域确定之后，js代码马上执行之前创建的
   *函数执行上下文，是在调用函数时产生的，函数体代码执行之前创建；
 
 区别2：静态与动态
  *作用域是静态的，只要函数定义好了就一直存在，且不会再变化；
  *执行上下文环境(对象)是动态的，调用函数时创建，函数调用结束时上下文环境(对象)就会被自动释放； (局部变量自动释放) 
  
 联系：
  *执行上下文环境(对象)是从属于所在的作用域
  *全局执行上下文环境 ==》全局作用域
  *函数执行上下文环境 ==》对应的函数作用域

3.作用域链

 1.理解：
    *多个上下级关系的作用域形成的链，它的方向是从内向外
    *查找变量时，就沿着作用域链来查找的；
    
 2.查找一个变量的查找规则：
    *a在当前作用域下的执行上下文中查找对应的属性，若有直接返回，否则进入b；
    *b在上一级作用域的执行上下文中查找对应的属性，若有直接返回，否则进入c；
    *c再次执行b的相同操作，直到找到全局作用域中，若还未找到就抛出异常；

<script type="text/javascript">
    	var a=1;
    	function fn1(){
    		var b=2;
    		function fn2(){
    			var c=3;
    			console.log(c);     //返回3  ，fn2本函数作用域中找到
    			console.log(b);     //返回2  ，fn1函数作用域中找到
    			console.log(a);     //返回1  ，全局作用域中找到
    			console.log(A);     //返回报错  ，所有作用域中都没有找到；
    		}
    		fn2();
    	}
    	fn1();
    </script>

练习题：

 <script type="text/javascript">
    	var x=10;
    	function fn(){
    		console.log(x);  //在当前作用域中没有，则去上一级全局作用域中找；
    	}          
    	function show(f){
    		var x=20;
    		f();             //此时调用函数fn()，则去执行函数；
    	}
    	show(fn);            //结果为10，	
    </script> 
    
    <script type="text/javascript">
    	var  fn = function (){
    		console.log(fn);
    	 }; 
    	fn();                //输出fn这个函数；	
    	var obj={
    		fn2:function (){
    			console.log(fn2);
      //输出fn2在函数中没有找到，就去全局作用域中找,
      //全局作用域中没有fn2，就报错；
      //console.log(this.fn2); 这样的才会在obj对象中找；
    		}
    	} 
    	obj.fn2();    //报错；
    </script>