JavaScript中的柯里化函数(curring function)

概念简单应用:

See the Pen curring in javascript by Wen Yan (@yanwen) on CodePen.

https://production-assets.codepen.io/assets/embed/ei.js
说明:在上述Demo里,采用柯里化函数setLineByXY作为mousedown事件的回掉函数。一个回掉函数即可实现不同点击事件处理。即回掉会遇到两种情况:首次点击设置起始点回掉和二次点击设置终止点回掉,它们都用一个函数实现。

当首次调用setLineByXY设置第一个点成功后,将返回设置第二个点的回掉函数,于是下一次点击事件将触发设置第二个点的回掉函数,当二点设置完毕,就可以画出一条直线,同时返回设置第一个点的回掉函数,以此类推。

柯里化简单解释:

所谓柯里化,就是在函数中,函数可以传入多个参数且一次只传入一个参数。咋看起简单,其实柯里化在实现某些功能时显得十分方便。

概念简单示例:

let curring = (a) => {
  return (b) => {
    return (c) => {
      return a + b + c
    }
  }
}

curring('hell')('o, w')('orld')
// console output -> 'hello, world'

在上面概念示例里,当调用currying(‘hell’)时,返回函数:

[anonymous function] = (b) => {
  return (c) => {
    return a + b + c
  }
}

再次调用curring(‘hell’)(‘o, w’),将返回:

[anonymous function] = (c) => {
  return a + b + c
}

curring(‘hell’)(‘o, w’)(‘orld’)将返回“ ‘hell’ + ‘o, w’ + ‘orld’ ”,即得到“hello, world”。

参考:

https://en.wikipedia.org/wiki/Currying

作者: YanWen

Web 开发者

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google photo

You are commenting using your Google account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

Connecting to %s