浅谈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+)+)$/, 'test@163.com');

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

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("跑步"); // 小明跑步