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

在这里插入图片描述
在这里插入图片描述今日练习:

<!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); //改变变为0
		// 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被销毁了执行期上下文,但是b的AO还保存着a的劳动成果所以依旧保留着a里num的数值,把b返回到全局了。
  //       }

  //       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已经变成10了
   // 	}
   // 	return arr;
   // }

   // var myArr = test();
   // for(var j = 0; j < 10; j++){

   // 	myArr[j]();
   // }
   // 为什么全是10啊?
   // 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>
发布了82 篇原创文章 · 获赞 21 · 访问量 2032

猜你喜欢

转载自blog.csdn.net/weixin_45174208/article/details/104202984