【JS】函数柯里化

柯里化 curring 是把接收多个参数的函数变换成接收一个单一参数（最初函数的第一个参数）的函数，并且返回接收余下参数并且返回结果的新函数的技术。

柯里化 -> 部分求值，返回接收剩余参数且返回结果的新函数。

特点：#

参数复用 - 复用最初函数的第一个参数
提前返回 - 返回接收余下的参数且返回结果的新函数
延迟执行 - 返回新函数，等待执行

应用#

兼容浏览器事件监听方法
性能优化：防抖和节流
兼容低版本IE bind方法等

事件监听#

1
var addEvent = function(elm, type, fn, isCapture) {
2
  if (window.addEventListener) {
3
    elm.addEventListner(type, fn, isCapture)
4
  } else if (window.attachEvent) {
5
    elm.attachEvent('on' + type, fn)
6
  }
7
}

当我们调用addEvent方法时，都会执行if else-if 进行一次兼容判断，其实这个判断是无必要的，用柯里化优化后如下：

1
var addEvent = function(elm, type, fn, isCapture) {
2
  if (window.addEventListener) {
3
    return function(elm, type, fn, isCapture) {
4
      elm.addEventListen(type, fn, isCapture)
5
    }
6
  } else if (window.attachEvent) {
7
    return function(elm, type, fn) {
8
      elm.attachEvent('on' + type, fn)
9
    }
10
  }
11
}

该例就利用了柯里化提前返回和执行的特点：

提前返回 - 使用函数立即调用进行一次兼容判断，返回兼容的事件绑定方法
延迟执行 - 返回新函数，在新函数调用兼容的事件方法。等待addEvent新函数调用，延迟执行

防抖和节流#

web开发中，事件resize, scroll, mousemove等属于高频事件。浏览器页面渲染帧率为60fps，大约16.67ms刷新一帧。若事件触发频率大于显示帧率，则会发生掉帧、卡顿等现象，更坏地浏览器直接崩溃。

要解决高频事件的问题，其根本在于：

高频事件处理函数，不应该含有复杂操作，如DOM操作和复杂计算（DOM操作一般会造成页面回流和重绘，使浏览器不断重新渲染页面）
控制高频事件的触发频率

其中防抖和节流对高频事件进行优化的原理就是通过延迟执行，将多个间隔接近的函数执行合并成一次函数执行。

防抖 debounce#

针对高频事件，防抖就是讲多个触发间隔接近的事件函数执行，合并成一次函数执行

实现防抖的关键点有两个：

使用setTimeout延时器，传入延迟时间，将事件处理函数延迟执行，并且通过事件触发频率与延迟事件值比较，控制处理函数是否执行
使用柯里化函数结合闭包思想，将执行状态保存在闭包中，返回新函数，在新函数中通过执行状态控制是否在滚动时执行处理函数

代码如下：

1
/*
2
 * @param    fn              Function    事件处理函数
3
 * @param    delay           Number      延迟时间
4
 * @param    isImmediate     Boolean     是否滚动时立刻执行
5
 * @return   Function                    事件处理函数
6
 */
7
var debound = function(fn, delay, isImmediate) {
8
  // 使用闭包，保存执行状态，控制函数调用顺序
9
  var timer
10

11
  return function() {
12
    var _args = [].slice.call(arguments),
13
      context = this
14

15
    clearTimeout(timer)
16

17
    var _fn = function() {
18
      timer = null
19
      if (!isImmediate) fn.apply(context, _args)
20
    }
21
    // 是否滚动时立即执行
22
    var callNow = !timer && isImmediate
23

24
    timer = setTimeout(_fn, delay)
25

26
    if (callNow) fn.apply(context, _args)
27
  }
28
}
29
// 防抖使用如下：
30
var debounceScroll = debounce(function() {
31
  // 事件处理函数，滚动时进行的处理
32
}, 100)
33
window.addEventListener('scroll', debounceScroll)

防抖技术仅靠传入延迟时间值的大小控制高频事件的触发频率。如果传入的延迟事件较大，则可能导致不触发事件处理函数，这时节流就派上用场了

节流 throttle#

节流也是将多个触发间隔接近的事件函数执行，合并成一次函数执行，并且在指定时间内执行执行一次事件处理函数。

节流实现原理跟防抖类似，但是比防抖多了一次实函数执行判断，实现的关键点是：

利用闭包存储了当前和上一次执行的时间戳，通过两次函数执行的时间差跟指定的延迟事件的比较，控制函数是否执行

代码如下：

1
/*
2
* @param    fn          Function    事件处理函数
3
* @param    wait        Number      延迟时间
4
* @return   Function                事件处理函数
5
*/
6
var throttle = function(fn, wait) {
7
  var timer, previous, now, diff
8

9
  return function() {
10
    var _args = [].slice.call(arguments),
11
      context = this
12
    // 存储当前时间戳
13
    now = Date.now()
14

15
    var _fn = function() {
16
      // 存储上一次执行的时间戳
17
      previous = Date.now()
18
      timer = null
19
      fn.apply(context, _args)
20
    }
21
    clearTimeout(timer)
22

23
    if (previous !== undefined) {
24
      // 时间差
25
      diff = now - previous
26
      if (diff >= wait) {
27
        fn.apply(context, _args)
28
        previous = now
29
      } else {
30
        timer = setTimeout(_fn, wait)
31
      }
32
    } else {
33
      _fn()
34
    }
35
  }
36
}

拓展：节流和防抖都是用setTimeout实现的，改用window.requestAnimationFrame

实现起来更简单，性能更好，但不支持低版本IE

1
// 解决requestAnimationFrame兼容
2
var reFrame = window.requestAnimationFrame ||
3
  window.webkitRequestAnimationFrame ||
4
  function(callback) {
5
    window.setTimeout(callback, 1000 / 60)
6
  }
7

8
// 柯里化封装
9
var refThrottle = function(fn) {
10
  var isLocked
11
  return function() {
12
    var context = this
13
    var _args = arguments
14

15
    if (isLocked) return
16

17
    isLocked = true
18
    reFrame(function() {
19
      isLocked = false
20
      fn.apply(context, _args)
21
    })
22
  }
23
}

bind柯里化函数#

函数的bind方法我们不陌生，但在低版本IE不兼容，若要实现兼容其关键点在于：

bind方法改变this指向，却不会执行原函数，那么我们可以利用柯里化延迟执行，参数复用和提前返回的特点，返回新函数，在新函数是用apply方法执行原函数

我们这里将bind方法封装为两种情况：

简单的bind方法封装，不考虑构造函数等，实现如下：

1
if (!Function.prototype.bind) {
2
  Function.prototype.bind = function(context) {
3
    if (context.toString() !== '[object Object]' && context.toString() !== '[object Window]') {
4
      throw TypeError('context is not a Object')
5
    }
6
    var _this = this
7
    var args = [].slice.call(arguments, 1)
8

9
    return function() {
10
      var _args = [].slice.call(arguments)
11
      _this.apply(context, _args.concat(args))
12
    }
13
  }
14
}

复杂情况，考虑bind的任何用法，这里直接是用MDN的bind兼容方法：

1
if (!Function.prototype.bind) {
2
  Function.prototype.bind = function(oThis) {
3
    if (typeof this !== 'function') {
4
      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable')
5
    }
6

7
    var aArgs = Array.prototype.slice.call(arguments, 1),
8
      fToBind = this,
9
      fNOP = function() {},
10
      fBound = function() {
11
        return fToBind.apply(
12
          this instanceof fNOP ? this : oThis,
13
          // 获取调用时 fBound 的传参 .bind返回的函数入参往往是这么传递的
14
          aArgs.concat(Array.prototype.slice.call(arguments))
15
        )
16
      }
17

18
      // 维护原型关系
19
      if (this.prototype) {
20
        // Function.prototype doesn't have a prototype property
21
        fNOP.prototype = this.prototype
22
      }
23
      fBound.prototype = new fNOP()
24

25
      return fBound
26
  }
27
}

要理解复杂的bind兼容方法，必须彻底理解以下四个基础知识

JS原型对象
构造函数是用new操作符的过程
this的指向问题
熟悉bind方法的是用场景

柯里化函数的封装#

分析了柯里化的各种是用场景，我们来尝试一下封装一个简单的柯里化函数，如下：

1
function createCurry(fn) {
2
  if (typeof fn !== 'function') {
3
    throw TypeError('fn is not a function')
4
  }
5
  // 复用第一个参数
6
  var args = [].slice.call(arguments, 1)
7
  // 返回新函数
8
  return function() {
9
    // 收集剩余参数
10
    var _args = [].slice.call(arguments)
11
    // 返回结果
12
    return fn.apply(this, args.concat(_args))
13
  }
14
}

柯里化函数的特点如上注释所示：

复用第一个参数
返回新函数
收集剩余参数
返回结果

音乐

音乐