js闭包~！[[5]]

原創

毛太

2020-02-22 11:31

啥是闭包？

这个玩意儿很有用！！

为啥要有面相对象~？

还有函数式编程哦~

js好强大

且看分析：

<script> 
/*
	下面例子形成了一个 "环境包"  但是别人访问不到 age=20 这个。

	下面这个例子，  t2 接受了一个包  一个环境包  t2是有生态环境的

	主要在于 return t2  -----> t2 把 环境包捕捉
*/
function t1(){
	var age = 20;
	function t2(){
		alert(age);
	}
	return t2;
}

var tmp = t1();

var age = 99;
tmp();


</script>

取决于声明的时候不取决于调用的时候

例子：

<script> 
/*
	// {函数的作用于取决于声明的时候， 不取决调用的时候！！！！}


	两个爸爸， 到底alert那个爸爸？


*/
function who_dad(){
	var dad = '我是第一个爸爸';
	var me = function (){
		alert(dad);
	}
	return me;
}


function run(){
	var dad = "我是第二个爸爸";
	var me = who_dad();
	me();
}


run();


</script>

闭包计数器：

(场景：多人都开发js,每调用一次自增一次)

1：设置一个全局的变量

如：

window.xx = yy;
window.xx ++;   // 但是缺点是，污染全局变量了,  都用引用自己的js 就妥了....

2：闭包来搞 (污染不到的变量)

<script> 

function cout(){
	var cnt = 0;
	function cen(){
		return ++cnt;
	}
	return cen;   // 返回内个包包
}
var cen = cout();   // 需要接受这个包包
alert(cen());     // 调用
alert(cen());     // 调用
alert(cen());     // 调用

</script>

精简：

// 一  返回包


(function (){
	var cnt = 0;
	return function(){
		return ++cnt;
	}
})();

// 二  接收包  完成
var cen = (function (){ 
	var cnt = 0;
	return function (){
		return ++cnt;
	}
})();
alert(cen());
alert(cen());
alert(cen());

重要：

/*
三、依然是全局变量，解决:
	1. 统一放在一个全局变量上面 如->jquery->$
	2. 用每个人自己的命名空间
*/
// 1 放在jquery的计数器
var $ = {};
$.cnt =( function (){
	var cnt = 0;
	return function(){
		return ++cnt;
	}
})();
alert($.cnt());
alert($.cnt());
alert($.cnt());
alert($.cnt());


// 2 个人命名空间
var zp = {};  // 说清，zp是我的空间
zp.cnt = (function(){
	var cnt = 0;
	return function (){
		return ++cnt;
	}
})();
alert(zp.cnt());
alert(zp.cnt());
alert(zp.cnt());
alert(zp.cnt());

最后一个测试题目：

	
	<ul>
		<li>one</li>
		<li>three</li>
		<li>four</li>
		<li>five</li>
	</ul>


<script> 

/*
	导航栏， 有四个
	然后想给效果，  然后for来添加click事件

单击分别淡出 1 2 3 4
*/

var li = document.getElementsByTagName('li');
for(var i=0;i<li.length;i++){
	li[i].οnclick=function(){
		alert(i);
	}
}


// 结果 4 4 4 4 

</script>

答案：

(复制下面哦~)

var li = document.getElementsByTagName('li');
for(var i=0;i<li.length;i++){
	li[i].xxoo = i;	
	li[i].οnclick=function(){		
		alert(this.xxoo);
	}
}

// 函数式

var list = document.getElementsByTagName('li');
var len = list.length;
var i = 0;

for (i; i < len; i++) {
    (function (n) {
        list[n].onclick = function () {
            alert(n);
        };
    })(i)
}