1.闭包的概念
在对作用域，作用域链的概念进行讨论时我们知道，一般情况下定义在函数内部的变量在函数外部是不可访问的。但某些时候有又确实有这样的需求，这时就会用到闭包。闭包，就是能够读取其他函数内部变量的函数。这就是闭包的概念。通过闭包我们可以在一个函数内部访问另一个函数内部的变量。
2.闭包的形式
下面介绍闭包的形式，也就是访问函数内部变量的常见手段。
1 函数返回值为函数
function foo (){
let name = 'xiaom'
return function (){
return name
}
}
const bar = foo()
console.log(bar())
// 全局变量bar获取到了局部作用域foo的内部变量,这是最常见的形式
2 内部函数赋给外部变量
let num;
function foo() {
const _num = 18;
function bar() {
return _num;
}
num = bar;
}
foo();
console.log(num()); // 18
3 通过立即执行函数行成独立作用域，保存变量（es6之后使用let，const替代）。
下面是一个经典例子。
for (var i = 1; i <= 5; i++) {
setTimeout(function timer() {
console.log(i);
}, i * 1000);
}
// 上述代码的预期输出结果是每隔一秒按顺序输出12345。
// 根据前面讨论过的事件循环机制，定时器任务会在同步任务执行完毕后再执行。因此此时的i已经变成6 会直接输出5个6。
// 解决这一问题的关键就是每次循环形成一个独立作用域，这样定时器中的操作执行时会访问对应作用域的变量。
for (var i = 1; i <= 5; i++) {
// 包一层立即执行函数 并传入i 由于内部操作用到了i 因此会形成闭包
(function (i) {
setTimeout(function timer() {
console.log(i);
}, i * 1000);
})(i)
闭包函数的其他形式大多是以上形式的变体。
3.闭包的优缺点
通过上述例子可以总结出闭包的几大优点
- 1.外部可以访问函数内部变量。
- 2.让函数内部变量一直保留在内存中。
function fn1(){
let count = 0;
function fn2 (){
count++
return count
}
return fn2
}
let result1 = fn1()
console.log(result1()) // 1
console.log(result1()) // 2
//通常来讲，函数执行完毕后，函数连同它内部的变量会被一同销毁。
//由于函数fn内部变量count被外部引用，因此fn执行完毕后，其内部变量count不会被销毁。因此过度使用闭包会造成内存消耗。
- 3.形成独立作用域。
显然，通过上述第二点也能看出，由于闭包会使函数内部变量一直保存在内存中，造成内存消耗，因此过度使用会造成页面性能问题。解决方法是及时删除不使用的局部变量。
4.闭包的应用—柯里化函数
下面介绍闭包的一个典型应用：柯里化函数。介绍柯里化之前需要先了解高阶函数的概念。
高阶函数，是对其他函数进行操作的函数，可以将它们作为参数或返回它们。
通俗的讲，满足以下条件之一的函数就是高阶函数：
- 接受参数为函数
- 返回值为函数
下面是一个简单例子，利用高阶函数为传入的函数绑定this指向。他同时满足上述两个条件。
function foo() {
console.log(this.name);
}
const obj = {
name: "xiaom",
};
const obj1 = {
name: "xiaoh"
}
function bindThis(fn, obj) {
return fn.bind(obj);
}
bindThis(foo, obj)(); //xiaom
bindThis(foo, obj1)(); //xiaoh
柯里化就是一种特殊的高阶函数，下面介绍柯里化函数的概念。
定义：柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。
直接看定义非常晦涩难懂，我们把上述例子稍加改造。
function foo() {
console.log(this.name);
}
const obj = {
name: "xiaom",
};
const obj1 = {
name: "xiaoh"
}
function curryingFn(fn) {
return (obj) => {
return fn.bind(obj)
}
}
const newFoo = curryingFn(foo)
newFoo(obj)() // xiaom
newFoo(obj1)() // xiaoh
上述操作就是把原先接受两个参数的函数变成先接受一个参数，再返回一个函数去处理剩余的参数。可以看到，柯里化函数的形式恰好符合闭包函数的第一种形式。而柯里化函数的优势就是参数复用。试想，就上述例子而言，当我们需要多次改变fn的指向时就无需每次都传入fn，只需传入需要绑定的对象即可。
下面再介绍几个利用柯里化函数进行参数复用的典型例子。
- 正则判断
如下，封装一个正则判断的函数，传入正则表达式和目标字符串，返回判断结果。没有问题。
function check(targetString, reg) {
return reg.test(targetString);
}
check(/^1[34578]\d{9}$/, '14900000088');
check(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/, '[email protected]');
当业务需求只是判断手机号或判断邮箱时，仍需要每次都传入相应的正则这就很低效，因此可以使用柯里化函数再次进行封装。
function curring(reg) {
return (str) => {
return reg.test(str);
};
}
var checkPhone = curring(/^1[34578]\d{9}$/);
var checkEmail = curring(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/);
console.log(checkPhone("183888888")); // false
console.log(checkPhone("17654239819")); // true
console.log(checkEmail("[email protected]")); // true
- 判断html标签
我们知道Vue中的自定义组件在模板中是可以用html标签的形式书写的。那么vue碰到一个标签，如何知道他是html标签还是自定义组件呢？常规的思路是，html标签类型就那几十种。将其存入数组中，每碰到一个标签就判断其是否在该数组中即可。但这种方式缺点也很明显，每次都要循环数组，非常消耗性能。我们可以将数组结构转为字典。
let set = {};
tags.forEach( key => set[ key ] = true )
进一步优化，将该标签集合以参数的形式传入。这样就封装了一个通用函数，它可以判断某个元素是否在指定集合中。
let tags = "div,p,a,img,ul,li".split(",");
function makeMap(keys) {
let set = {};
tags.forEach((key) => (set[key] = true));
return function (tagName) {
return !!set[tagName.toLowerCase()];
};
}
let isHTMLTag = makeMap(tags);
console.log(isHTMLTag('Menu')) // false
console.log(isHTMLTag('div')) // true
- 自定义封装bind方法
相较于call和apply,bind是永久性的改变this指向，相当于复用了使用call/apply时传入的目标对象，因此可以使用柯里化函数封装。
function foo(action) {
console.log(this.name + action);
}
const obj1 = {
name: "小明",
};
foo.__proto__.myBind = function (obj) {
const fun = this;
return function (args) {
fun.call(obj, args);
};
};
const newFoo = foo.myBind(obj1);
newFoo("跑步"); // 小明跑步
柯里化函数的优势远不止这些。我们重点要理解柯里化函数的设计思想及其应用场景。在实际业务中遇到一些固定的操作，需要复用的数据，或为函数扩展功能时，就可以考虑使用柯里化函数。柯里化的更多优势还需再实际编码中进行体会。
参考链接:https://www.jianshu.com/p/5e1899fe7d6b