【JS】函数柯里化[转载]

转自前端早读课 葉河英。好文就转了,更重要的目的是代码量多,敲一遍慢慢吸收

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

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

特点:

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

应用

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

事件监听

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

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

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

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

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

防抖和节流

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

要解决高频事件的问题,其根本在于:

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

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

防抖 debounce

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

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

  • 使用setTimeout延时器,传入延迟时间,将事件处理函数延迟执行,并且通过事件触发频率与延迟事件值比较,控制处理函数是否执行

  • 使用柯里化函数结合闭包思想,将执行状态保存在闭包中,返回新函数,在新函数中通过执行状态控制是否在滚动时执行处理函数

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/*
* @param fn Function 事件处理函数
* @param delay Number 延迟时间
* @param isImmediate Boolean 是否滚动时立刻执行
* @return Function 事件处理函数
*/
var debound = function(fn, delay, isImmediate) {
// 使用闭包,保存执行状态,控制函数调用顺序
var timer

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

clearTimeout(timer)

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

timer = setTimeout(_fn, delay)

if (callNow) fn.apply(context, _args)
}
}
// 防抖使用如下:
var debounceScroll = debounce(function() {
// 事件处理函数,滚动时进行的处理
}, 100)
window.addEventListener('scroll', debounceScroll)

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

节流 throttle

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

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

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

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/*
* @param fn Function 事件处理函数
* @param wait Number 延迟时间
* @return Function 事件处理函数
*/
var throttle = function(fn, wait) {
var timer, previous, now, diff

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

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

if (previous !== undefined) {
// 时间差
diff = now - previous
if (diff >= wait) {
fn.apply(context, _args)
previous = now
} else {
timer = setTimeout(_fn, wait)
}
} else {
_fn()
}
}
}

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 解决requestAnimationFrame兼容
var reFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60)
}

// 柯里化封装
var refThrottle = function(fn) {
var isLocked
return function() {
var context = this
var _args = arguments

if (isLocked) return

isLocked = true
reFrame(function() {
isLocked = false
fn.apply(context, _args)
})
}
}

bind柯里化函数

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

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

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

  1. 简单的bind方法封装,不考虑构造函数等,实现如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
if (!Function.prototype.bind) {
Function.prototype.bind = function(context) {
if (context.toString() !== '[object Object]' && context.toString() !== '[object Window]') {
throw TypeError('context is not a Object')
}
var _this = this
var args = [].slice.call(arguments, 1)

return function() {
var _args = [].slice.call(arguments)
_this.apply(context, _args.concat(args))
}
}
}
  1. 复杂情况,考虑bind的任何用法,这里直接是用MDN的bind兼容方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
if (!Function.prototype.bind) {
Function.prototype.bind = function(oThis) {
if (typeof this !== 'function') {
throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable')
}

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

// 维护原型关系
if (this.prototype) {
// Function.prototype doesn't have a prototype property
fNOP.prototype = this.prototype
}
fBound.prototype = new fNOP()

return fBound
}
}

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

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

柯里化函数的封装

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

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

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

  • 复用第一个参数
  • 返回新函数
  • 收集剩余参数
  • 返回结果
Author: Fridolph
Link: http://blog.fridolph.wang/2018/04/15/【JS】函数柯里化[转载]/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.