作用域和闭包（五） 闭包

废话少说，总结几句

 

• 函数在定义时的词法作用域以外的地方被调用。闭包使得函数可以继续访问定义时的词法作用域
• 无论使用何种方式对函数类型的值进行传递，当函数在别处被调用时都可以观察到闭包
• 无论通过何种手段将内部函数传递到所在的词法作用域以外，它都会持有对原始定义作用域的引用，无论在何处执行这个函数都会使用闭包

 

如果将（访问它们各自词法作用域的）函数当做第一级的值类型并到处传递，你就会看到闭包在这些函数中的应用。在定时器、事件监听器、Ajax请求、跨窗口通信、Web Workers 或者任何其它的异步（或者同步）任务中，只要使用了回调函数，实际上就是在使用闭包！

 

循环和闭包

错误示例1：

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

 错误示例2：

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

正确示例1：

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

正确示例2：

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

重返块作用域

快乐写法1：

本质上这是将一个块转换成一个可以被关闭的作用域

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

快乐写法2：

for循环头部的let指出变量在循环过程中不止被声明一次，每次迭代都会声明。

随后的每个迭代都会使用上一个迭代结束时的值来初始化这个变量。

for(let i=1;i<5;i++){

	setTimeout(function timer(){
		console.log(i);
	},i*1000);
}

5.5 模块

示例代码：

function CoolModule(){
	var something="cool";
	var another=[1,2,3];

	function doSomething() {
		console.log(something);
	}

	function doAnother() {
		console.log(another.join("!"));
	}

	return {
		doSomething:doSomething,
		doAnother:doAnother
	};
}

var foo=CoolModule();

foo.doSomething();//cool
foo.doAnother();//1!2!3!

暴露函数接口，并让内部变量对外透明。

CoolModule ( ) 返回一个用对象字面量语法｛key:value, ...｝来表示的对象。这个返回的对象中含有对内部函数而不是内部数据变量的引用。我们保持内部数据变量是隐藏且私有的状态。可以将这个对象类型的返回值看做本质上是模块的公共API。太多不看

 

从模块中返回一个实际的对象并不是必须的，也可以直接返回一个内部函数。jQuery就是一个很好地例子。jQuery和$标识符就是jQuery模块的公共API，但它们本身就是函数（由于函数也是对象，它本身也可以拥有属性）。

 

doSomething（）和 doAnother（）函数具有涵盖模块实例内部作用域的闭包（通过调用CoolModule（）实现）。当通过返回一个含有属性引用的对象的方式来将函数传递到词法作用域外部时，我们已经创造了可以观察和实践闭包的条件。

 

简单地说，模块模式需要具备两个条件

1. 必须有外部的封闭函数，该函数必须至少被调用一次（每次调用都会创建一个新的模块实例）。

2. 封闭函数必须返回至少一个内部函数，这样内部函数才能在私有作用域中形成闭包，并且可以访问或者修改私有的状态。

 

简单看一下修改成 js 中的单例模式：

var foo=(function CoolModule(){
	var something="cool";
	var another=[1,2,3];

	function doSomething() {
		console.log(something);
	}

	function doAnother() {
		console.log(another.join("!"));
	}

	return {
		doSomething:doSomething,
		doAnother:doAnother
	};
})();

foo.doSomething();//cool
foo.doAnother();//1!2!3!

将模块函数转换成了IIFE，立即调用这个函数并将返回值直接赋值给单例的模块实例标识符foo。

 

模块也是普通的函数，因此可以接受参数：

function CoolModule(id){
	function identify(){
		console.log(id);
	}

	return {
		identify:identify
	};
}

var foo1=CoolModule("foo 1");
var foo2=CoolModule("foo 2");

foo1.identify();//"foo 1"
foo2.identify();//"foo 2"

模块的   命名将要作为公共API返回的对象：

var foo=(function CoolModule(id){
	function change() {
		// 修改公共API
		publicAPI.identify=identify2;
	}

	function identify1(){
		console.log(id);
	}

	function identify2(){
		console.log(id.toUpperCase());
	}

	var publicAPI={
		change:change,
		identify:identify1
	};

	return publicAPI;
})("foo module");

foo.identify();//foo module
foo.change();
foo.identify();//FOO MODULE

通过在模块实例的内部保留对公共API对象的内部引用，可以从内部对模块实例进行修改，包括添加或删除方法和熟悉感，以及修改它们的值。

5.5.1 现代的模块机制（看不太懂）

大多数模块依赖加载器 / 管理器本质上都是将这种模块定义封装进一个友好的API。这里并不会研究某个具体的库，为了宏观了解简单地介绍一些核心概念：

var MyModules=(function Manager(){
	var modules={};

	function define(name,deps,impl) {
		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
	};
})();

这段代码的核心是modules[name]=impl.apply(impl,deps)。

为了模块的定义引入了包装函数（可以传入任何依赖），并且将返回值，也就是模块的API，储存在一个根据名字来管理的模块列表中。

 

下面展示饿了如何使用它来定义模块：

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

“foo”和“bar”模块都是通过一个返回公共API的函数定义的。“foo”甚至接受“bar”的实例作为依赖参数，并能相应地使用它。

• 模块管理器符合前面列出的模块模式的两个特点：

1. 调用包装了函数定义的包装函数
2. 将返回值作为该模块的API

换句话说，模块就是模块，及时在它们外层加上一个友好的包装工具也不会发生任何变化。

5.5.2 未来的模块机制

先空着

基于函数的模块并不是一个能被静态识别的模式（编译器无法识别），它们的API语义只有在运行时才会被考虑进来。因此可以在运行时修改一个模块的API（参考前面关于public API的讨论）。

相比之下，ES6模块API是静态的（API不会在运行时改变）。由于编辑器知道这一点，因此可以在（的确也这样做了）编译期检查对导入模块的API成员的引用是否真实存在。如果API引用并不存在，编译器会在编译时就抛出“早期”错误，而不会等到运行期再动态解析（而且报错）。

先空着

 

 

5.6 小结

• 我们在词法作用域的环境下写代码，而其中而函数也是值，可以随意传来传去。

当函数可以记住并访问所在的词法作用域，即使函数是在当前词法作用域的环境下写代码，而其中的函数也是值，可以随意传来传去。

闭包是一个非常强大的工具，可以用多种形式来实现模块等模式。

模块主要有两个特征：

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