电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

深入詳解JS函數的柯里化

瀏覽:86日期:2024-03-23 08:56:24
目錄一、補充知識點之函數的隱式轉換二、補充知識點之利用call/apply封數組的map方法三、由淺入深的柯里化四、柯里化通用式五、柯里化與bind一、補充知識點之函數的隱式轉換

來一個簡單的思考題。

function fn() { return 20;}console.log(fn + 10); // 輸出結果是多少?

稍微修改一下,再想想輸出結果會是什么?

function fn() { return 20;} fn.toString = function() { return 10;} console.log(fn + 10); // 輸出結果是多少?

還可以繼續修改一下。

function fn() { return 20;} fn.toString = function() { return 10;} fn.valueOf = function() { return 5;} console.log(fn + 10); // 輸出結果是多少?

// 輸出結果分別為function fn() { return 20;}10 20 15

當使用console.log,或者進行運算時,隱式轉換就可能會發生。從上面三個例子中我們可以得出一些關于函數隱式轉換的結論。

當我們沒有重新定義toString與valueOf時,函數的隱式轉換會調用默認的toString方法,它會將函數的定義內容作為字符串返回。而當我們主動定義了toString/vauleOf方法時,那么隱式轉換的返回結果則由我們自己控制了。其中valueOf的優先級會toString高一點。

因此上面例子的結論就很容易理解了。建議大家動手嘗試一下。

二、補充知識點之利用call/apply封數組的map方法

map(): 對數組中的每一項運行給定函數,返回每次函數調用的結果組成的數組。

通俗來說,就是遍歷數組的每一項元素,并且在map的第一個參數(回調函數)中進行運算處理后返回計算結果。返回一個由所有計算結果組成的新數組。

// 回調函數中有三個參數// 第一個參數表示newArr的每一項,第二個參數表示該項在數組中的索引值// 第三個表示數組本身// 除此之外,回調函數中的this,當map不存在第二參數時,this指向丟失,當存在第二個參數時,指向改參數所設定的對象var newArr = [1, 2, 3, 4].map(function(item, i, arr) { console.log(item, i, arr, this); // 可運行試試看 return item + 1; // 每一項加1}, { a: 1 }) console.log(newArr); // [2, 3, 4, 5]

在上面例子的注釋中詳細闡述了map方法的細節。現在要面臨一個難題,就是如何封裝map。

可以先想想for循環。我們可以使用for循環來實現一個map,但是在封裝的時候,我們會考慮一些問題。我們在使用for循環的時候,一個循環過程確實很好封裝,但是我們在for循環里面要對每一項做的事情卻很難用一個固定的東西去把它封裝起來。因為每一個場景,for循環里對數據的處理肯定都是不一樣的。

于是大家就想了一個很好的辦法,將這些不一樣的操作單獨用一個函數來處理,讓這個函數成為map方法的第一個參數,具體這個回調函數中會是什么樣的操作,則由我們自己在使用時決定。因此,根據這個思路的封裝實現如下。

Array.prototype._map = function(fn, context) { var temp = []; if(typeof fn == ’function’) {var k = 0;var len = this.length;// 封裝for循環過程for(; k < len; k++) { // 將每一項的運算操作丟進fn里,利用call方法指定fn的this指向與具體參數 temp.push(fn.call(context, this[k], k, this))} } else {console.error(’TypeError: ’+ fn +’ is not a function.’); } // 返回每一項運算結果組成的新數組 return temp;} var newArr = [1, 2, 3, 4]._map(function(item) { return item + 1;})// [2, 3, 4, 5]

在上面的封裝中,我首先定義了一個空的temp數組,該數組用來存儲最終的返回結果。在for循環中,每循環一次,就執行一次參數fn函數,fn的參數則使用call方法傳入。

在理解了map的封裝過程之后,我們就能夠明白為什么我們在使用map時,總是期望能夠在第一個回調函數中有一個返回值了。在eslint的規則中,如果我們在使用map時沒有設置一個返回值,就會被判定為錯誤。

ok,明白了函數的隱式轉換規則與call/apply在這種場景的使用方式,我們就可以嘗試通過簡單的例子來了解一下柯里化了。

三、由淺入深的柯里化

在前端面試中有一個關于柯里化的面試題,流傳甚廣。

實現一個add方法,使計算結果能夠滿足如下預期:

add(1)(2)(3) = 6add(1, 2, 3)(4) = 10add(1)(2)(3)(4)(5) = 15

很明顯,計算結果正是所有參數的和,add方法每運行一次,肯定返回了一個同樣的函數,繼續計算剩下的參數。

我們可以從最簡單的例子一步一步尋找解決方案。

當我們只調用兩次時,可以這樣封裝。

function add(a) { return function(b) {return a + b; }} console.log(add(1)(2)); // 3

如果只調用三次:

function add(a) { return function(b) {return function (c) { return a + b + c;} }} console.log(add(1)(2)(3)); // 6

上面的封裝看上去跟我們想要的結果有點類似,但是參數的使用被限制得很死,因此并不是我們想要的最終結果,我們需要通用的封裝。應該怎么辦?總結一下上面2個例子,其實我們是利用閉包的特性,將所有的參數,集中到最后返回的函數里進行計算并返回結果。因此我們在封裝時,主要的目的,就是將參數集中起來計算。

來看看具體實現。

function add() { // 第一次執行時,定義一個數組專門用來存儲所有的參數 var _args = [].slice.call(arguments); // 在內部聲明一個函數,利用閉包的特性保存_args并收集所有的參數值 var adder = function () {var _adder = function() { [].push.apply(_args, [].slice.call(arguments)); return _adder;}; // 利用隱式轉換的特性,當最后執行時隱式轉換,并計算最終的值返回_adder.toString = function () { return _args.reduce(function (a, b) {return a + b; });} return _adder; } return adder.apply(null, [].slice.call(arguments));} // 輸出結果,可自由組合的參數console.log(add(1, 2, 3, 4, 5)); // 15console.log(add(1, 2, 3, 4)(5)); // 15console.log(add(1)(2)(3)(4)(5)); // 15

上面的實現,利用閉包的特性,主要目的是想通過一些巧妙的方法將所有的參數收集在一個數組里,并在最終隱式轉換時將數組里的所有項加起來。因此我們在調用add方法的時候,參數就顯得非常靈活。當然,也就很輕松的滿足了我們的需求。

那么讀懂了上面的demo,然后我們再來看看柯里化的定義,相信大家就會更加容易理解了。

柯里化(英語:Currying),又稱為部分求值,是把接受多個參數的函數變換成接受一個單一參數(最初函數的第一個參數)的函數,并且返回一個新的函數的技術,新函數接受余下參數并返回運算結果。

接收單一參數,因為要攜帶不少信息,因此常常以回調函數的理由來解決。 將部分參數通過回調函數等方式傳入函數中 返回一個新函數,用于處理所有的想要傳入的參數

在上面的例子中,我們可以將add(1, 2, 3, 4)轉換為add(1)(2)(3)(4)。這就是部分求值。每次傳入的參數都只是我們想要傳入的所有參數中的一部分。當然實際應用中,并不會常常這么復雜的去處理參數,很多時候也僅僅只是分成兩部分而已。

咱們再來一起思考一個與柯里化相關的問題。

假如有一個計算要求,需要我們將數組里面的每一項用我們自己想要的字符給連起來。我們應該怎么做?想到使用join方法,就很簡單。

var arr = [1, 2, 3, 4, 5]; // 實際開發中并不建議直接給Array擴展新的方法// 只是用這種方式演示能夠更加清晰一點Array.prototype.merge = function(chars) { return this.join(chars);} var string = arr.merge(’-’) console.log(string); // 1-2-3-4-5

增加難度,將每一項加一個數后再連起來。那么這里就需要map來幫助我們對每一項進行特殊的運算處理,生成新的數組然后用字符連接起來了。實現如下:

var arr = [1, 2, 3, 4, 5]; Array.prototype.merge = function(chars, number) { return this.map(function(item) {return item + number; }).join(chars);} var string = arr.merge(’-’, 1); console.log(string); // 2-3-4-5-6

但是如果我們又想要讓數組每一項都減去一個數組之后再連起來呢?當然和上面的加法操作一樣的實現。

var arr = [1, 2, 3, 4, 5]; Array.prototype.merge = function(chars, number) { return this.map(function(item) {return item - number; }).join(chars);} var string = arr.merge(’~’, 1); console.log(string); // 0~1~2~3~4

機智的小伙伴肯定發現困惑所在了。我們期望封裝一個函數,能同時處理不同的運算過程,但是我們并不能使用一個固定的套路將對每一項的操作都封裝起來。于是問題就變成了和封裝map的時候所面臨的問題一樣了。我們可以借助柯里化來搞定。

與map封裝同樣的道理,既然我們事先并不確定我們將要對每一項數據進行怎么樣的處理,我只是知道我們需要將他們處理之后然后用字符連起來,所以不妨將處理內容保存在一個函數里。而僅僅固定封裝連起來的這一部分需求。

于是我們就有了以下的封裝。

// 封裝很簡單,一句話搞定Array.prototype.merge = function(fn, chars) { return this.map(fn).join(chars);} var arr = [1, 2, 3, 4]; // 難點在于,在實際使用的時候,操作怎么來定義,利用閉包保存于傳遞num參數var add = function(num) { return function(item) {return item + num; }} var red = function(num) { return function(item) {return item - num; }} // 每一項加2后合并var res1 = arr.merge(add(2), ’-’); // 每一項減2后合并var res2 = arr.merge(red(1), ’-’); // 也可以直接使用回調函數,每一項乘2后合并var res3 = arr.merge((function(num) { return function(item) {return item * num }})(2), ’-’) console.log(res1); // 3-4-5-6console.log(res2); // 0-1-2-3console.log(res3); // 2-4-6-8

大家能從上面的例子,發現柯里化的特征嗎?

四、柯里化通用式

通用的柯里化寫法其實比我們上邊封裝的add方法要簡單許多。

var currying = function(fn) { var args = [].slice.call(arguments, 1); return function() {// 主要還是收集所有需要的參數到一個數組中,便于統一計算var _args = args.concat([].slice.call(arguments));return fn.apply(null, _args); }} var sum = currying(function() { var args = [].slice.call(arguments); return args.reduce(function(a, b) {return a + b; })}, 10) console.log(sum(20, 10)); // 40console.log(sum(10, 5)); // 25五、柯里化與bind

Object.prototype.bind = function(context) { var _this = this; var args = [].prototype.slice.call(arguments, 1); return function() {return _this.apply(context, args) }}

這個例子利用call與apply的靈活運用,實現了bind的功能。

在前面的幾個例子中,我們可以總結一下柯里化的特點:

接收單一參數,將更多的參數通過回調函數來搞定? 返回一個新函數,用于處理所有的想要傳入的參數; 需要利用call/apply與arguments對象收集參數; 返回的這個函數正是用來處理收集起來的參數。

希望大家讀完之后都能夠大概明白柯里化的概念,如果想要熟練使用它,就需要我們掌握更多的實際經驗才行。

以上就是深入詳解JS函數的柯里化的詳細內容,更多關于JS函數的柯里化的資料請關注好吧啦網其它相關文章!

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 旋转滴界面张力仪(张力测定仪器)-百科| 焊缝跟踪系统_激光位移传感器_激光焊缝跟踪传感器-创想智控 | 高铝轻质保温砖_刚玉莫来石砖厂家_轻质耐火砖价格 | 热处理炉-退火炉-回火炉设备厂家-丹阳市电炉厂有限公司 | 广东成考网-广东成人高考网| 山东臭氧发生器,臭氧发生器厂家-山东瑞华环保设备 | 美名宝起名网-在线宝宝、公司、起名平台 | 武汉高低温试验机-现货恒温恒湿试验箱-高低温湿热交变箱价格-湖北高天试验设备 | 储气罐,真空罐,缓冲罐,隔膜气压罐厂家批发价格,空压机储气罐规格型号-上海申容压力容器集团有限公司 | 电子海图系统-电梯检验系统-智慧供热系统开发-商品房预售资金监管系统 | 重庆波纹管|重庆钢带管|重庆塑钢管|重庆联进管道有限公司 | 上海佳武自动化科技有限公司| 多功能三相相位伏安表-变压器短路阻抗测试仪-上海妙定电气 | 爆破器材运输车|烟花爆竹运输车|1-9类危险品厢式运输车|湖北江南专用特种汽车有限公司 | 博莱特空压机|博莱特-阿特拉斯独资空压机品牌核心代理商 | 精密光学实验平台-红外粉末压片机模具-天津博君 | 代做标书-代写标书-专业标书文件编辑-「深圳卓越创兴公司」 | 10吨无线拉力计-2吨拉力计价格-上海佳宜电子科技有限公司 | 哈尔滨京科脑康神经内科医院-哈尔滨治疗头痛医院-哈尔滨治疗癫痫康复医院 | 手表腕表维修保养鉴定售后服务中心网点 - 名表维修保养 | 脱硫搅拌器厂家-淄博友胜不锈钢搅拌器厂家 | 搬运设备、起重设备、吊装设备—『龙海起重成套设备』 | 深圳展厅设计_企业展馆设计_展厅设计公司_数字展厅设计_深圳百艺堂 | 新能源汽车电池软连接,铜铝复合膜柔性连接,电力母排-容发智能科技(无锡)有限公司 | 复盛空压机配件-空气压缩机-复盛空压机(华北)总代理 | 小型气象站_车载气象站_便携气象站-山东风途物联网 | 九爱图纸|机械CAD图纸下载交流中心 | 春腾云财 - 为企业提供专业财税咨询、代理记账服务 | 艺术涂料_进口艺术涂料_艺术涂料加盟_艺术涂料十大品牌 -英国蒙太奇艺术涂料 | 精密光学实验平台-红外粉末压片机模具-天津博君 | 视频教程导航网_视频教程之家_视频教程大全_最新视频教程分享发布平台 | 山东风淋室_201/304不锈钢风淋室净化设备厂家-盛之源风淋室厂家 翻斗式矿车|固定式矿车|曲轨侧卸式矿车|梭式矿车|矿车配件-山东卓力矿车生产厂家 | 高温链条油|高温润滑脂|轴承润滑脂|机器人保养用油|干膜润滑剂-东莞卓越化学 | LHH药品稳定性试验箱-BPS系列恒温恒湿箱-意大利超低温冰箱-上海一恒科学仪器有限公司 | 花纹铝板,合金铝卷板,阴极铝板-济南恒诚铝业有限公司 | 新密高铝耐火砖,轻质保温砖价格,浇注料厂家直销-郑州荣盛窑炉耐火材料有限公司 | 光伏家 - 太阳能光伏发电_分布式光伏发电_太阳能光伏网 | 企业彩铃制作_移动、联通、电信集团彩铃上传开通_彩铃定制_商务彩铃管理平台-集团彩铃网 | 工控机-工业平板电脑-研华工控机-研越无风扇嵌入式box工控机 | 单机除尘器 骨架-脉冲除尘器设备生产厂家-润天环保设备 | ?水马注水围挡_塑料注水围挡_防撞桶-常州瑞轩水马注水围挡有限公司 |