闭包
前言
现在去面试前端开发的岗位，如果你面对的面试官也是个前端，并且不是太水的话，你有很大的概率被问到JavaScript的闭包。
什么是闭包
什么是闭包，百度、Google之后，你可能会搜索很多答案...
《JavaScript高级程序设计》这样描述
闭包是指有权访问另一个函数作用域中的变量的函数
《JavaScript权威指南》这样描述
从技术的角度讲，所有的JavaScript函数都是闭包：它们都是对象，它们都关联到作用域链
《你不知道的JavaScript》这样描述
当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是当前词法作用域之外执行
最认可的当属《你不知道的JavaScript》，前面两种说话都没有错。
但闭包应该是基于词法作用域书写代码时产生的自然结果，是一种现象！你也不用为了利用闭包而特意的创建，因为闭包的在你的代码中随处可见，只是你还不知道当时你写的那一段代码其实就产生了闭包
讲解闭包
上面已经说到，当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。
看段代码
function fn1(){
var name='小马哥'
function fn2(){
console.log(name);
}
fn2();
}
fn1();
如果是根据《JavaScript高级程序设计》和《JavaScript权威指南》来说，上面的代码已经产生闭包了。fn2访问到了fn1的变量，满足了条件“有权访问另一个函数作用域中的变量的函数”，fn2本身是个函数，所以满足了条件“所有的JavaScript函数都是闭包”。
这的确是闭包，但是这种方式定义的闭包不太好观察。
再看一段代码：
function fn1(){
var name='小马哥'
function fn2(){
console.log(name);
}
return fn2;
}
var fn3 = fn1();
fn3();
这样就清晰地展示了闭包：
- fn2的词法作用域能访问fn1的作用域
- 将fn2当做一个值返回
- fn1执行后，将fn2的引用赋值给fn3
- 执行fn3，输出了变量name
我们知道通过引用关系，fn3就是fn2函数本身。执行fn3能正常输出name,这不就是fn2能记住并访问它所在的词法作用域，并且fn2函数的运行还是在当前词法作用域之外
正常来说，当fn1函数执行完毕之后，其作用域是会被销毁的，然后垃圾回收器会释放那段内存空间。而闭包却很神奇的将fn1的作用域存活了下来，fn2依然持有该作用域的引用，这个引用就是闭包。
总结：某个函数在定义时的词法作用域之外的地方被调用，闭包可以使该函数极限访问定义时的词法作用域。
注意：对函数值的传递可以通过其他的方式，并不一定只有返回该函数这一条路，比如可以用回调函数：
function fn1() {
var name = '小马哥';
function fn2() {
console.log(name);
}
fn3(fn2);
}
function fn3(fn) {
fn();
}
fn1();
本例中，将内部函数fn2传递给fn3，当它在fn3中被运行时，它是可以访问到name变量的。
所以无论通过哪种方式将内部的函数传递到所在的词法作用域以外，它都会持有对原始作用域的引用，无论在何处执行这个函数都会使用闭包。
再次解释闭包
以上的例子会让人觉得有点学院派了，但是闭包绝不仅仅是一个无用的概念，你写过的代码当中肯定有闭包的身影，比如类似如下的代码：
function waitSomeTime(msg,time){
setTimeout(function(){
console.log(msg);
},time);
}
waitSomeTime('hello',1000);
定时器中有一个匿名函数，该匿名函数就有涵盖waitSomeTime函数作用域的闭包，因此当1秒之后，该匿名函数能输出msg。
另一个很经典的例子就是for循环中使用定时器延迟打印的问题：
for (var i = 1; i <= 10; i++) {
setTimeout(function () {
console.log(i);
}, 1000);
}
我们预期的结果为1~10，但却输出10此11。这是因为setTimeout中的匿名函数执行的时候，for循环都已经结束了，for循环结束的条件是i大于10，所以输出10此11。
原因：i是声明在全局作用域中的，定时器中的匿名函数也是执行在全局作用域中，那当时是每次都输出11
原因知道了，解决起来就简单了，我们可以让i在每次迭代的时候，都产生一个私有的作用域，在这个私有的作用域中保存当前i的值
for (var i = 1; i <= 10; i++) {
(function () {
var j = i;
setTimeout(function () {
console.log(j);
}, 1000);
})();
}
这样就达到我们的预期了呀，让我们用一种比较优雅的写法改造一些，将每次迭代的i作为实参传递给自执行函数，自执行函数中用变量去接收：
for (var i = 1; i <= 10; i++) {
(function (j) {
setTimeout(function () {
console.log(j);
}, 1000);
})(i);
}
闭包的应用
- setTimeout
//原生的setTimeout传递的第一个函数不能带参数
setTimeout(function(param){
alert(param)
},1000)
//通过闭包可以实现传参效果
function func(param){
return function(){
alert(param)
}
}
var f1 = func(1);
setTimeout(f1,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));
- 缓存
function getNewValue(key) {
var obj = {
name:'张三'
}
return obj[key]
}
var CacheCount = (function () {
var cache = {};
return {
getCache: function (key) {
if (key in cache) { // 如果结果在缓存中
console.log(cache);
return cache[key]; // 直接返回缓存中的对象
}
var newValue = getNewValue(key); // 外部方法，获取缓存
cache[key] = newValue; // 更新缓存
return newValue;
}
};
})();
console.log(CacheCount.getCache("name"));
console.log(CacheCount.getCache("name"));
JavaSript的高级函数
回调函数
function createDiv(cb){
let oDiv = document.createElement('div');
document.body.appendChild(oDiv);
if(typeof cb === 'function'){
cb(oDiv);
}
}
createDiv(function(oDiv){
oDiv.style.color = 'red';
});
这个例子中，有一个createDiv这个函数，这个函数负责创建一个div并添加到页面中，但是之后要再怎么操作这个div，createDiv这个函数就不知道，所以把权限交给调用createDiv函数的人，让调用者决定接下来的操作，就通过回调的方式将div给调用者。
这是体现出了抽象,既然不知道div接下来的操作，那么就直接给调用者，让调用者去实现
抽象就是隐藏更具体的实现细节，从更高的层次看待我们要解决的问题。
数组中遍历
在编程的时候，并不是所有功能都是现成的，比如上面例子中，可以创建好几个div，对每个div的处理都可能不一样，需要对未知的操作做抽象，预留操作的入口，作为一名程序员，我们需要具备这种在恰当的时候将代码抽象的思想
接下来看一下ES5中提供的几个数组操作方法，可以更深入的理解抽象的思想，ES5之前遍历数组的方式是：
var arr = [1, 2, 3, 4, 5];
for (var i = 0; i < arr.length; i++) {
var item = arr[i];
console.log(item);
}
仔细看一下，这段代码中用for，然后按顺序取值，有没有觉得如此操作有些不够优雅，为出现错误留下了隐患，比如把length写错了，一不小心复用了i。既然这样，能不能抽取一个函数出来呢？最重要的一点，我们要的只是数组中的每一个值，然后操作这个值，那么就可以把遍历的过程隐藏起来：
function forEach(arr, callback) {
for (var i = 0; i < arr.length; i++) {
var item = arr[i];
callback(item);
}
}
forEach(arr, function (item) {
console.log(item);
});
以上的forEach方法就将遍历的细节隐藏起来的了，把用户想要操作的item返回出来，在callback还可以将i、arr本身返回：callback(item, i, arr)。
JS原生提供的forEach方法就是这样的：
arr.forEach(function (item) {
console.log(item);
});
跟forEach同族的方法还有map、some、every等。思想都是一样的，通过这种抽象的方式可以让使用者更方便，同事又让代码变得更加清晰。
抽象是一种很重要的思想，让可以让代码变得更加优雅，并且操作起来更方便。在高阶函数中也是使用了抽象的思想，所以学习高阶函数得先了解抽象的思想。
高阶函数
什么是高阶函数
至少满足以下条件中的一个，就是高阶函数
- 将其他函数作为参数传递
- 将函数作为返回值
简单来说，就是一个函数可以操作其他函数，将其他函数作为参数或将函数作为返回值。我相信，写过JS代码的同学对这个概念都是很容易理解的，因为在JS中函数就是一个普通的值，可以被传递，可以被返回。
参数可以被传递，可以被返回
函数作为参数传递
函数作为参数传递就是我们上面提到的回调函数，回调函数在异步请求中用的非常多，使用者想要在请求成功后利用请求回来的数据做一些操作，但是又不知道请求什么时候结束。
用jQuery来发一个Ajax请求
function getDetailData(sub_category_id, callback) {
$.ajax(`https://www.luffycity.com/api/v1/courses/?sub_category=${sub_category_id}&ordering=`, function (res) {
if (typeof callback === 'function') {
callback(res);
}
});
}
getDetailData('1', function (res) {
// do some thing
});
类似Ajax这种操作非常适合用回调去做，当一个函数里不适合执行一些具体的操作，或者说不知道要怎么操作时，可以将相应的数据传递给另一个函数，让另一个函数来执行，而这个函数就是传递进来的回调函数。
另一个典型的例子就是数组排序
函数作为值返回
在判断数据类型的时候最常用的是typeof,但是typeof有一定的局限性,比如：
console.log(typeof []);//object
console.log(typeof {});//object
判断数组和对象都是输出object,如果想要更细致的判断应该要使用Object.prototype.toString
console.log(Object.prototype.toString.call([])); // 输出[object Array]
console.log(Object.prototype.toString.call({})); // 输出[object Object]
于是，我们可以写出判断对象、数组、数字的方法
function isObject(obj){
return Object.prototype.toString.call(obj) === '[object Object]';
}
function isArray(arr) {
return Object.prototype.toString.call(arr) === '[object Array]';
}
function isNumber(number) {
return Object.prototype.toString.call(number) === '[object Number]';
}
我们发现这三个方法太像了，可以做一些抽取:
function isType(type) {
return function (obj) {
return Object.prototype.toString.call(obj) === '[object ' + type + ']';
}
}
var isArray = isType('Array');
console.log(isArray([1,2]));
这个isType方法就是高阶函数，该函数返回了一个函数，并且利用闭包，将代码变得优雅。