你不知道的JS（上卷）——读书笔记5 作用域闭包

第五章

闭包

闭包在JS中无处不在，我们需要的是能够识别、理解并能灵活运用它

function foo(){
	var a = 2;
	function bar(){
		console.log(a); 	//2
	}
	bar();
}

在上述代码中，是一个属于闭包的简单例子，但是并不能最好的代表闭包所表现出来的作用，借用书中的一句话：

这是闭包吗？技术上来讲，也许是。但根据前面的定义，确切地说并不是。我认为最准确地用来解释bar()对a的引用的方法是词法作用域的查找规则，而这些规则只是闭包的一部分。（但却是非常重要的一部分）

再看一个例子：

function foo(){
	var a = 2;
	function bar(){
		console.log(a);
	}
	return bar;
}

var baz = foo();
baz();	//2

上述例子，调用了foo函数然后返回了bar函数并赋值到baz标识符中，然后调用了baz函数。baz并不在baz函数的词法作用域中，却能调用到bar函数，以及可以使用bar函数定义时的词法作用域（引用了变量a）
再次引用书中的话：

这个函数在定义时的词法作用域以外的地方被调用。闭包使得函数可以继续访问定义时的词法作用域

这就是闭包

闭包可以使得函数的词法作用域不会消失，再举一个例子：

function wait(message) {
	setTimeout(function timer(){
		console.log(message);
	},1000);
	
}

wait('hello , 闭包！')

在执行了timer函数时，实际上，timer函数的词法作用域涵盖了wait函数以及全局作用域。所以依然可以打印出message标识符。timer函数作为setTimeout函数中的某个回调函数，例如：

function setTimeout(fuc,time){
	fuc();	//实际上是timer函数
}

在setTimeout的函数中，fuc函数实际上就完整拥有着timer函数的词法作用域。这就是闭包
再换句话说，只要使用了回调函数，就相当于是形成并且使用了闭包

下面再举个例子：

var a = 2;

(function IIFE(){
	console.log(a);
})();

可能会有些人说这个形成了闭包，但是书的作者却不那么认为，因为在IIFE函数中，引入的a标识符他只是遵循着普通词法作用域的规则去查找a变量，而非闭包发现。IIFE的函数调用并不是在其词法作用域之外被调用，是在函数定义时的词法作用域中执行的函数

循环

在这又说明一下关于循环和闭包的问题，有这样如下代码

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

现在可以想想，代码的打印结果将会是什么？

很多人刚接触这段代码时可能会觉得每隔1s打印出1,2,3,4,5，但实际情况是，会每隔1s打印出1个6

6是变量i的最终值，可以思考一下为什么打印的都是i的最终值：6

实际上，setTimeout函数始终都是在for循环之后所执行，当for循环后，i的值就为6

尽管被迭代了5次，函数被调用了5次，但是实际上所有迭代的函数都公用着一个i

所以，当函数执行时，会根据词法作用域，查找i的值，显而易见会得到i的最终值：6

我们要使得每个迭代的函数都能调用迭代那一时刻的i值，就需要再创建个闭包作用域用于保存i值：

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

这样，当迭代的函数再次查找i时，会在当前词法作用域中（也就是在IIFE函数中）查找到i值（过程中也用到了闭包）

当然用let也可以很好地起到循环的效果：

for(let i = 1; i<=5, i++){
	setTimeout(function timer(){
		console.log(i);
	},i*1000);
}

模块

观察下面代码：

function module(){
	let name = 'yy';
	
	function getName(){
		console.log(name);
	}

	return {
		getName:getName
	}
}

let foo = module();

module.getName();	//yy

通过引用对象的方式，我们可以通过对象的方法来获取完整的函数的词法作用域

模块模式需要具备两个条件：

1. 必须拥有外部的封闭函数，该函数必须至少被调用一次（每次调用都会创建一个新的模块实例）
2. 封闭函数必须返回至少一个内部函数，这样内部函数才能在私有作用域中形成闭包，并且可以访问或者修改私有的状态

简单的单例模式：

var module = (function foo(){
	let name = 'yy';
	
	function getName(){
		console.log(name);
	}

	return {
		getName:getName
	}
})();

let bar = module();

bar.getName();	//yy

现代的模块机智

//核心
var MyModules = (function Manager(){
	var modules = {};
	function define(){
		for(var i = 0; i < deps.length; i++){
			deps[i] = modules[deps[i]];
		}
		modules[name] = impl.apply(impl,deps);
	}
	
	function get(name){
		return modules[name];
	}

	return {
		define:define,
		get:get
	}

})();

//定义
MyModules.define('bar',[],function(){
	function hello(who){
		return 'Let me introduce:' + who;
	}

	return {
		hello:hello
	};
});

MyModules.define('foo',['bar'],function(bar){
	var hungry = 'hippo';
	
	function awesome(){
		console.log(bar.hello(hungry).toUpperCase());
	}

	return {
		awesome:awesome
	};
});

var bar = MyModules.get('bar');
var foo = MyModules.get('foo');

console.log(
	bar.hello('hippo')
)	//Let me introduce:hippo

foo.awesome();	//LET ME INTRODUCE: HIPPO

未来的模块机制

相比于基于函数的模块，ES6的模块是静态的（API不会在运行时改变）

相关的有：import、module、export

小结

当函数可以记住并访问所在的词法作用域，即使函数是在当前词法作用域之外执行，这时就产生了闭包

模块的两个主要特征

1. 为创建内部作用域而调用了一个包装函数
2. 包装函数的返回值必须至少包括一个对内部函数的引用，这样就会创建涵盖整个包装函数内部作用域的闭包