JavaScript思维导图——Day 5（js作用域、闭包、立即执行函数）

叁歲伎倆 2023-07-03 12:23 76阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3NDIwOA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3NDIwOA_size_16_color_FFFFFF_t_70 1]今日练习：

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    </head>
    <body>
    	<script type="text/javascript">
    		
    		// function a () {
    		// 	function b () {
    		// 		var b = 234;
    		// 		aa = 0;
    		// 	}
    		// 	var aa = 123;
    		// 	b();
    		// 	console.log(aa); //改变变为０
    		// var glob = 100;
    		// a();
    
    		// a defined a.[[scope]] --> 0 : GO{}
    		// a runing  a.[[scope]] --> 0 : AO{}
      //                                1 : GO{}
      //       b runing  b.[[scope]] --> 0 : b.AO{}
      //                                1 : a.AO{}
      //                               2 : GO{}
    
    
      //       function a () {
      //       	function b () {
      //       		function c () {
    
      //       		}
      //       		c();
      //       	}
      //       	b();
      //       }
      //       a();
      //      作用域链自上而下访问，解释了由内可以访问外由外不能访问里。
      //       a defined a.[[scope]] --> 0 : GO
    
      //       a doing   a.[[scope]] --> 0 : AO a
      //                                 1 : GO
    
      //       b defined b.[[scope]] --> 0 : AO a
      //                                 1 : GO
    
      //       b doing   b.[[scope]] --> 0 : AO b
      //                                 1 : AO a
      //                                 2 : GO
    
      //       c defined c.[[scope]] --> 0 : AO b
      //                                 1 : AO a
      //                                 2 : GO
    
      //       c doing   c.[[scope]] --> 0 : AO c
      //                                 1 : AO b
      //                                 2 : AO a
      //                                 3 : GO
    
    
      //       function a () {
      //       	function b() {
      //       		var bbb = 234;
      //       		console.log(aaa);
      //       	}
      //       	var aaa = 123;
      //       	return b;
      //       }
      //       var glob = 100;
      //       var demo = a();
      //       demo();
    
      //       function a() {
      //       	var num = 100;
      //       	function b() {
      //       		num++;
      //       		console.log(num);
      //       	}
      //       	return b; //a被销毁了执行期上下文，但是ｂ的AO还保存着ａ的劳动成果所以依旧保留着ａ里ｎｕｍ的数值，把ｂ返回到全局了。
      //       }
    
      //       var demo = a();
      //       demo(); // 101
      //       demo(); // 102
      //       // aAO{
      //       // 	num : 101;
      //       // }
    
      // function add() {
      // 	var count = 0;
      // 	function demo() {
      // 		count++;
      // 		console.log(count);
      // 	}
      // 	return demo;
      // }
    
      // var counter = add();
      // counter();
      // counter();
      //闭包的累加器
    
      // function test() {
      // 	var num = 100;
      // 	function a() {
      // 		num ++;
      // 		console.log(num);
      // 	}
      // 	function b() {
      // 		num --;
      // 		console.log(num);
      // 	}
      // 	return [a,b];
      // }
      // var myArr = test();
      // myArr[0]();//101
      // myArr[1]();//100
    
      // function eater() {
      // 	var food = "";
      // 	var obj ={
      // 		eat : function () {
      // 			console.log("i am eating " + food);
      // 			food = "";
      // 		},
      // 		push : function (myFood) {
      // 			food = myFood;
      // 		}
      // 	}
      // 	return obj;
      // }
    
      // var eater1 = eater();
      // eater1.push('banana');
      // eater1.eat();//缓存应用
    
      //　立即执行函数
      // var num = (function abc(a,b,c) {
      // 	return a + b;
      // }(1, 2, 3));//abc不存在　，执行完立即销毁..num = 3;
    
      // (function () {}()); W3C　建议第一种
      // (function () {})();
      // function test() {
      // 	var a = 123;
      // }() 语法解析错误　加了()就是函数声明不是函数表达式
    
      //只有表达式才能被执行符号执行
    　　　// 　var test = function () {
    　　　// 	console.log('a');
    　　　//   }();
       
       // + function test() {
       // 	console.log('a');
       // }(); 立即执行函数
    
       // function test(a,b,c,d) {
       // 	console.log(a + b + c + d);
       // }(1, 2, 3, 4); 能报错但是不报错，而且不执行，系统理解为
    
       // function test(a,b,c,d) {
       // 	console.log(a + b + c + d);
       // }
    
    
       // (1, 2, 3, 4);
       // 分开的，没意义
    
       // function test() {
       // 	var arr = [];
       // 	for (var i = 0; i < 10; i++) {
       // 		arr[i] = function () {
       // 			document.write(i + " ");
       // 		}// function里的i无动于衷 返回后才考虑i的数值　等到外部执行的时候　i已经变成１０了
       // 	}
       // 	return arr;
       // }
    
       // var myArr = test();
       // for(var j = 0; j < 10; j++){
    
       // 	myArr[j]();
       // }
       // 为什么全是１０啊？
       // i = 10 结束了
       // 10 个函数都是打印i 的
    
        function test() {
       	var arr = [];
       	for (var i = 0; i < 10; i++) {
       		(function (j) {
       			
       			arr[j] = function () {
       				document.write(j + " ");
       			}
       		}(i));
       	}
       	return arr;
       }
    
       var myArr = test();
       for(var j = 0; j < 10; j++){
    
       	myArr[j]();  //打印出来0 1 2 3 4 5 6 7 8 9
       }
    
    
    
    
    
    
    
    
    
    
    	</script>
    
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3NDIwOA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200206214500367.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3NDIwOA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3NDIwOA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020020621452780.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3NDIwOA==,size_16,color_FFFFFF,t_70