前端知识储备（二）闭包

1.什么是闭包？

函数执行，形成一个私有的执行上下文，保护里边的私有变量不受外界的干扰，除了保护私有变量外，
还可以保存一些内容，这样的模式叫做闭包。.

2.闭包的作用

闭包的作用有两个，保护和保存。

2.1保护

• 团队开发时，每个开发者把自己的代码放在一个私有的作用域中，防止相互之间的变量命名冲突； 把需要提供给别人的方法，通过 return 或window.xxx 的方式暴露在全局下。
• jQuery 的源码中也是利用了这种保护机制。
• 封装私有变量。

2.2保护

• 选项卡闭包的解决方案。

// 事件绑定引发的索引问题
var btnBox = document.getElementById('btnBox'),
inputs = btnBox.getElementsByTagName('input')
var len = inputs.length;
	for(var i = 0; i < 1en; i++){
		inputs[i].onclick = function () {
			alert(i)
		}
	}
//会执行input的总长度，并不会对应显示

• 解决方法：
  1.闭包解决：

// 事件绑定引发的索引问题
var btnBox = document.getElementById('btnBox'),
	inputs = btnBox.getElementsByTagName('input')
var len = inputs.length;
	for(var i = 0; i < 1en; i++){
		~function(i){
		inputs[i].onclick = function () {
			alert(i)
		}
	  }(i)
	}

2.自定义属性：给每个对象添加一个索引属性就OK了。

var btnBox = document.getElementById('btnBox'),
	inputs = btnBox.getElementsByTagName('input')
var len = inputs.length;
	for(var i = 0; i < 1en; i++){
		inputs[i].myClick = i;
		inputs[i].onclick = function () {
			alert(this.myClick)
		}
	}

3.经典题目

var num = 10;
var obj = {num: 20};

obj.fn = (function (num){
	this.num = num * 3;
		console.log( num )
			num++;
		return function (n) {
		console.log( n )
			this.num += n;
			num++;
			console.log(num);
		}
	})(obj.num)

var fn = obj.fn;

fn(5) //this指向window var num = 10； num++ obj.num的数值20，所以打印出来的是22。

obj.fn(10)//this指向obj 因为上一步已经返回num值为22,return 直接使用num22,22+1。输出num=23

fn(10)

obj.fn(5)
console.log(num,obj.num)

// 打印window下的num,obj.num的值，num在fn(5)中改变一次，所以num = 10*3+5+10 = 75

// obj.num值为：obj.num=20+n(obj.fn(10)+obj.fn(5)) = 35

注解，最主要的就是this的指向问题，在fn()中this.的指向是window，在obj.fn()中，this的指向是obj，所以num的初值也不同，一个是10，一个是20.