這篇文章將為大家詳細(xì)講解有關(guān)Javascript柯里化流程的示例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站制作、做網(wǎng)站、奉節(jié)網(wǎng)絡(luò)推廣、微信平臺(tái)小程序開(kāi)發(fā)、奉節(jié)網(wǎng)絡(luò)營(yíng)銷、奉節(jié)企業(yè)策劃、奉節(jié)品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供奉節(jié)建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com

函數(shù)式編程是一種如今比較流行的編程范式，它主張將函數(shù)作為參數(shù)進(jìn)行傳遞，然后返回一個(gè)沒(méi)有副作用的函數(shù)，說(shuō)白了，就是希望一個(gè)函數(shù)只做一件事情。

像Javascript，Haskell，Clojure等編程語(yǔ)言都支持函數(shù)式編程。

這種編程思想涵蓋了三個(gè)重要的概念：

• 純函數(shù)

• 柯里化

• 高階函數(shù)

而這篇文章主要是想向大家講清楚柯里化這個(gè)概念。

什么是柯里化

首先我們先來(lái)看一個(gè)例子：

function sum(a, b, c) {
 return a + b + c;
}
// 調(diào)用
sum(1, 2, 3); // 6

上述函數(shù)實(shí)現(xiàn)的是將a,b,c三個(gè)參數(shù)相加，改寫為柯里化函數(shù)如下：

function sum(a) {
 return function (b) {
  return function(c) {
    return a + b + c;
    } 
  }
}
// 調(diào)用
let sum1 = sum(1);
let sum2 = sum1(2);
sum2(3); // 6

所謂柯里化就是把具有較多參數(shù)的函數(shù)轉(zhuǎn)換成具有較少參數(shù)的函數(shù)的過(guò)程。

我們來(lái)一步步看上面那個(gè)柯里化函數(shù)做了什么，首先第一步調(diào)用了sum(1)，此時(shí)變量sum1相當(dāng)于：

sum1 = function(b) {
  return function(c) {
  // 注意此時(shí)變量a存在于閉包中，可以調(diào)用，a = 1
  return a + b + c;
 }
}

然后調(diào)用sum1(2)，此時(shí)賦值給變量sum2相當(dāng)于：

sum2 = function(c) {
 // 變量a,b皆在閉包中, a = 1, b = 2
 return a + b + c;
}

最后調(diào)用sum2(3)，返回1 + 2 + 3的結(jié)果6；

這就是一個(gè)最簡(jiǎn)單的柯里化函數(shù)，是不是很簡(jiǎn)單呢？

柯里化函數(shù)的作用

那么問(wèn)題來(lái)了，上面改寫后的柯里化函數(shù)和原函數(shù)比起來(lái)代碼多了不少，而且也不如原函數(shù)好理解，柯里化函數(shù)到底有什么用呢？

確實(shí)，柯里化函數(shù)在這里看起來(lái)的確是很臃腫，不實(shí)用，但在很多場(chǎng)景下他的作用是很大的，甚至很多人在不經(jīng)意間已經(jīng)在使用柯里化函數(shù)了。舉一個(gè)簡(jiǎn)單的例子：

假設(shè)我們有一批的長(zhǎng)方體，我們需要計(jì)算這些長(zhǎng)方體的體積，實(shí)現(xiàn)一個(gè)如下函數(shù)：

function volume(length, width, height) {
  return length * width * height;
}
volume(200, 100, 200);
volume(200, 150, 100);
volume(200, 50, 80);
volume(100, 50, 60);

如上計(jì)算長(zhǎng)方體的體積函數(shù)會(huì)發(fā)現(xiàn)存在很多相同長(zhǎng)度的長(zhǎng)方體，我們?cè)儆每吕锘瘮?shù)實(shí)現(xiàn)一下：

function volume(length, width, height) {
  return function(width) {
    return function(height) {
     return length * width * height;
      }
  }
}
let len200 = volume(200);
len200(100)(200);
len200(150)(100);
len200(50)(80);
volume(100)(50)(60);

如上，通過(guò)實(shí)現(xiàn)一個(gè)len200函數(shù)我們統(tǒng)一處理長(zhǎng)度為200的長(zhǎng)方體的體積，這就實(shí)現(xiàn)了參數(shù)復(fù)用。

我們?cè)倥e一個(gè)只執(zhí)行一次函數(shù)的例子：

function execOnce(fun) {
  let flag = true;
 return function() {
  if (flag) {
   fun && fun();
   flag = false;
  }
 }
}
let onceConsole = execOnce(function() {
  console.log('只打印一次');
});
onceConsole();
onceConsole();

如上，我們實(shí)現(xiàn)了一個(gè)execOnce函數(shù)，該函數(shù)接受一個(gè)函數(shù)參數(shù)，然后返回一個(gè)函數(shù)，變量flag存在閉包中，用來(lái)判斷返回的函數(shù)是否執(zhí)行過(guò)，onceConsole相當(dāng)于：

let onceConsole = function() {
 if (flag) {
    (function() {
    console.log('只打印一次');
   })()
   flag = false;
  }
}

這也是柯里化函數(shù)的一個(gè)簡(jiǎn)單應(yīng)用。

通用柯里化函數(shù)的實(shí)現(xiàn)

既然柯里化函數(shù)這么實(shí)用，那么我們能不能實(shí)現(xiàn)一個(gè)通用的柯里化函數(shù)呢？所謂通用，就是說(shuō)該函數(shù)可以把函數(shù)參數(shù)轉(zhuǎn)換為柯里化函數(shù)，看下第一版實(shí)現(xiàn)的代碼：

 // 第一版
var curry = function (fn) {
 var args = [].slice.call(arguments, 1);
 return function() {
  var newArgs = args.concat([].slice.call(arguments));
  return fn.apply(null, newArgs);
 };
};
 function add(a, b) {
  return a + b;
 }

var addFun = curry(add, 1, 2);
addFun() // 3
//或者
var addOne = curry(add, 1);

如上代碼，我們接受一個(gè)函數(shù)作為參數(shù)，然后收集其它的參數(shù)，將這些參數(shù)傳給這個(gè)函數(shù)參數(shù)去執(zhí)行。但上面的代碼有個(gè)問(wèn)題，參數(shù)不夠自由，比如我們想這么調(diào)用就會(huì)報(bào)錯(cuò)：

var addFun = curry(function(a, b,c) {
 return a + b + c;
}, 1);
addFun(2)(3); // 報(bào)錯(cuò) addFun(...) is not a function

這好像違背了我們參數(shù)復(fù)用的原則，改進(jìn)如下：

function curry(fn, args) {
 var length = fn.length;
 args = args || [];
 return function(...rest) {
  var _args = [...args, ...rest];
  return _args.length < length
   ? curry.call(this, fn, _args)
  : fn.apply(this, _args);
 }
}
var fn = curry(function(a, b, c) {
 console.log(a + b + c);
});
fn('a', 'b', 'c'); // abc
fn('a', 'b')('c'); // abc
fn('a')('b')('c'); // abc

如上實(shí)現(xiàn)就很完善，該工具函數(shù)的實(shí)現(xiàn)總結(jié)起來(lái)就一句話：

利用閉包將函數(shù)的參數(shù)儲(chǔ)存起來(lái)，等參數(shù)達(dá)到一定數(shù)量時(shí)執(zhí)行函數(shù)。

關(guān)于“Javascript柯里化流程的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。