一篇文章带你了解函数柯里化

前言这两天听人在讨论函数柯里化的应用,就想着写一篇自己关于函数柯里化的看法函数柯里化不管在面试还是日常的开发中都是经常被提及的一个东西,下面我们就来写一写函数柯里化是个什么东西

一、什么是函数柯里化

柯里化是函数的一个高级应用,也就是高级函数(接收函数作为参数的函数或者返回一个函数的调用，都可以叫做高阶函数)的一个特殊用法

柯里化：把接收多个参数的函数变换成接收一个单一参数的函数（单一参数为多个参数中的第一个）

函数柯里化思想：一个JS预处理的思想，降低通用性，提高适用性。

柯里化的核心原理：利用函数执行可以形成一个不销毁的私有作用域，把预先处理的内容都存在这个不销毁的作用域里面，并且返回一个小函数，以后要执行的就是这个小函数。

let fn= function(a){
    return function(b){
        return function(c){
            return a + b+ c
        }
    }
}
console.log(fn(1)(2)(3));

这就是一个非常基本且典型的柯里化函数,柯里化是指这样一个函数,它接收函数fn作为参数，运行后能够返回一个新的函数。并且这个新的函数能够处理函数fn的剩余参数

二、函数柯里化的应用

(1)参数的复用

函数柯里化之后,我们可以对不同数据里面的相同数据进行复用,这样可以大量降低我们代码重复编写例如我们要实现一个url的地址的拼接

function url (a,b,c){
    return a+b+c
}
console.log(url('http://','www.456.com',':8080'));  // http://www.456.com:8080

我们可以通过这样的函数,直接完成url的拼接,但如果是非常大量的代码呢? 假如我们的地址前面的协议都是http:,我们就可以通过柯里化进行参数的复用


    function url (a,b,c){
        return function (b,c) {
            return a+b+c
        }
    }
    const _url = url ('http://')
    console.log(_url('www.456.com',':8080'));  // http://www.456.com:8080
    console.log(_url('www.789.com',':8001'));  // http://www.789.com:8001
    console.log(_url('www.123.com',':8030'));  // http://www.123.com:8030

为了便于大家理解,这里我就写了个简单的参数复用。我们实际上就是把url函数的a，b，c两个参数变成了先用一个函数接收a然后返回一个函数去处理b，c参数。这样我们就可以完成一个简单的参数复用的功能。

参数的复用性不单单只局限于这种简单的复用,还有很多实用的写法例如使用柯里化函数进行验证,进行数据的分步处理,进行数据的提取等等...

(2)提前的兼容性处理

例如我们要处理事件监听的兼容性,这里的监听是有两种方式的一是主流浏览器的 addEventListener 一个是IE浏览器的 attachEvent 这里我们就可以通过自调用函数完成事件监听方式的兼容性处理

const addEvent = (function(){
    if(window.addEventListener) {
      return function (ele,event,listen,cap) {
          ele.addEventListener(event,function(e){
            listen.call(ele,e)
          },cap)
      }
    }else if (window.attachEvent) {
        return function (ele,event,attach){
            ele.addEventListener('on'+event,function(e){
            attach.call(ele,e)
          })
        }
    }
})()

当其里面兼容addEventListener)时,会接收4个参数

形参ele接收的是需要绑定的元素

形参event接收的是需要绑定的事件类型

形参listen接收需要执行的回调函数,并且改变了this的指向,将其绑定到元素身上

形参cap接收的是需要执行冒泡还是捕获流程

当其里面兼容attachEvent时,会接收3个参数(IE只支持事件的冒泡获)

形参ele接收的是需要绑定的元素

形参event接收的是需要绑定的事件类型,由于IE浏览器的事件类型需要加'on',所以这里就直接在代码里面进行添加

形参attach接收需要执行的回调函数,这里也改变了this的指向

时间不早了,函数柯里化就先写到这,下次有时间把柯里化经典面试题讲解一下希望对大家有所帮助