说说你对闭包的理解

要理解闭包，首先得先知道js的作用域和词法作用域

作用域

作用域就是用于确定变量在何处以及如何查找变量的规则

作用域就是查找变量的地方

作用域链：从下往上找，从该函数作用域中，一直往上面的作用域中找，如果找到了就停止寻找并返回，直到全局作用域中。

JavaScript也是有编译过程的

console.log(name); // 输出undefined
var name = 'iceman'; 

• 编译的时候在作用域中声明了一个name属性
• 运行的时候给这个name赋值

js在预编译后执行代码时就会进行查询，分别有：

• LHS -> Left Hand Side
• RHS -> Right Hand Side

简单的获取一个值，则需要RHS

给某个变量赋值，则需要LHS

function foo(a){
var b=a;
return a+b;
}
var c=foo(2);

有3处LHS查询，
a=2 c=… b=…
有4处RHS查询
foo(2… =a a… …b

词法作用域

词法作用域是作用域的一种工作模型

词法作用域是一种静态的作用域，也就是在写代码时，将变量和块作用域写在哪来决定，在书写的时候就确定了

---

理解了作用域和词法作用域，就可以来理解闭包了

《JavaScript高级程序设计》

闭包是指有权访问另一个函数作用域中的变量的函数

《JavaScript权威指南》

从技术角度讲，所有的JavaScript函数都是闭包：他们都是对象，他们都关联到作用域链

《你不知道的JavaScript》

当函数能够记住并访问到所在词法作用域，就产生了闭包，即使不在当前作用域执行

var age = 18
function fn1 () {
  console.log(age)
  var name = 'haha'
  function fn2 () {
    console.log(name)
  }
  fn2()
}
f1()

从上面的函数可以印证《JavaScript高级程序设计》的 “有权访问另一个函数作用域中的变量的函数” f2就是有权访问fn1中的变量,也印证了《JavaScript权威指南》的所有JavaScript函数都是闭包，因为fn1可以访问到age

function fn1 () {
  var name = 'haha'
  
  function f2() {
    console.log(name)
  }
  return f2
}
var fn3 = fn1()
fn4()

这个印证了《你不知道的JavaScript》中的 “函数能够记住并访问所在的词法作用域” f4执行，不在当前作用域中执行，还能输出’haha’，这就是记住并访问了所在词法作用域。

运用闭包

function waitSomeTime(msg, time) {
	setTimeout(function () {
		console.log(msg)
	}, time);
}
waitSomeTime('hello', 1000);

这个定时器有个匿名函数，这个匿名函数在定时器的词法作用域中，所以1秒后可以打印出hello

for (var i = 1; i <= 10; i++) {
	setTimeout(function () {
		console.log(i);
	}, 1000);
}

输出十个十一，是因为i是全局作用域的，匿名函数也是全局作用域中执行的，所以打印十个十一

解决的方法就很多了

1. for (var let = 1; i <= 10; i++) 
2. (function (j) {
		setTimeout(function () {
			console.log(j);
		}, 1000);
	})(i);
3. (function () {
		var j = i;
		setTimeout(function () {
			console.log(j);
		}, 1000);
	})();

定义模块，将函数暴露给外部，细节隐藏在内部

function module() {
	var arr = [];
	function add(val) {
		if (typeof val == 'number') {
			arr.push(val);
		}
	}
	function get(index) {
		if (index < arr.length) {
			return arr[index]
		} else {
			return null;
		}
	}
	return {
		add: add,
		get: get
	}
}
var mod1 = module();
mod1.add(1);
mod1.add(2);
mod1.add('xxx');
console.log(mod1.get(2));

参考文章：

深入理解闭包之前置知识—作用域与词法作用域

闭包详解一