1.闭包的概念：

? ? ? ? ? 当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数的内部变量,

且返回的那个函数在外部被执行,就产生了闭包.

2.闭包的定义：

一般有两种方式

<script>
	//第一种定义方式
    function  outer(){
		var num=10;
		function inner(){
			return num+=10
		}
		return inner()
	}
	//调用
	console.log(outer())


	//第二种定义方式
	function  out(){
		var num=10;
		return inner=function(){
			return num+=10
		}
	}
	//调用
	console.log(out()())
</script>

<script>
//闭包只能取得包含函数中任何变量的最后一个值
function outer(){
	var result=[]
	for(var i=0;i<10;i++){
		result[i]=function(num){
			return function(){
				console.log(num)
			}
		}(i)
	}
	return result;
}
var f=outer()
f[1]()
f[2]()
</script>

3闭包的特点

?this指向问题

var obj={
	name:'张三',
	getName:function(){
		console.log(this)
		//this指向的解决 在外面的函数中给我保存出一份this
		var that=this;
		return function(){
			console.log(that.name)
		}
	}
}
obj.getName()()

4.闭包的特性

? ? ?1:函数套函数
? ? ??2:内部函数可以直接访问外部函数的内部变量或参数
?????3:变量或参数不会被垃圾回收机制回收

5.闭包的优点

? ? ? ? 1:变量长期驻扎在内存中
????????2:避免全局变量的污染
? ? ? ??3:私有成员的存在

6.闭包的缺点

常驻内存??增大内存的使用量??使用不当会造成内存的泄露.

7.闭包应用场景

闭包解决索引值的问题

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
</head>

<body>
	<div>
		div11111111
	</div>
	<div>
		div22222222
	</div>
	<div>
		div33333333
	</div>
	<div>
		div44444444
	</div>
	<div>
		div55555555
	</div>
</body>
<script type="text/javascript">

	var oDiv = document.getElementsByTagName("div");


	for (var i = 0; i < oDiv.length; i++) {
		console.log(oDiv[i])
		oDiv[i].onclick=function(){
			console.log(i)
		}
		// function a () {//函数套函数
		// 	var x = i;  //外部函数的局部变量x   x绑定循环变量i
		// 	return function () {
		// 		console.log(x)
		// 	}
		// }
		// oDiv[i].onclick=a()
	}
</script>

函数防抖

? ? ? ? 防抖的含义：在事件出发n秒后在执行回调，如果在n秒内又被触发，则重新计算，相当于多次执行，只执行一次

/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn,delay){
    let timer = null
    //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
            timer = setTimeOut(fn,delay) 
        }else{
            timer = setTimeOut(fn,delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
        }
    }
}

回调
　定义行为，然后把它关联到某个用户事件上（点击或者按键）。代码通常会作为一个回调（事件触发时调用的函数）绑定到事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
    <a href="#" id="size-12">12</a>
    <a href="#" id="size-20">20</a>
    <a href="#" id="size-30">30</a>

    <script type="text/javascript">
        function changeSize(size){
            return function(){
                document.body.style.fontSize = size + 'px';
            };
        }

        var size12 = changeSize(12);
        var size14 = changeSize(20);
        var size16 = changeSize(30);

        document.getElementById('size-12').onclick = size12;
        document.getElementById('size-20').onclick = size14;
        document.getElementById('size-30').onclick = size16;

    </script>
</body>
</html>