浅谈JavaScript闭包与柯里化函数

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+)+)$/);

当业务需求只是判断手机号或判断邮箱时，仍需要每次都传入相应的正则这就很低效，因此可以使用柯里化函数再次进行封装。

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("exy@163.com")); // 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("跑步"); // 小明跑步

柯里化函数的优势远不止这些。我们重点要理解柯里化函数的设计思想及其应用场景。在实际业务中遇到一些 固定的操作，需要复用的数据，或为函数扩展功能时 ，就可以考虑使用柯里化函数。柯里化的更多优势还需再实际编码中进行体会。