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

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

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):