underscore之function_動力節(jié)點(diǎn)Java學(xué)院整理
因?yàn)閡nderscore本來就是為了充分發(fā)揮JavaScript的函數(shù)式編程特性,所以也提供了大量JavaScript本身沒有的高階函數(shù)。
bind
bind()有什么用?我們先看一個常見的錯誤用法:
'use strict'; console.log('Hello, world!'); // 輸出'Hello, world!' var log = console.log; log('Hello, world!'); // Uncaught TypeError: Illegal invocation
如果你想用log()取代console.log(),按照上面的做法是不行的,因?yàn)橹苯诱{(diào)用log()傳入的this指針是undefined,必須這么用:
'use strict'; var log = console.log; // 調(diào)用call并傳入console對象作為this: log.call(console, 'Hello, world!') // 輸出Hello, world!
這樣搞多麻煩!還不如直接用console.log()。但是,bind()可以幫我們把console對象直接綁定在log()的this指針上,以后調(diào)用log()就可以直接正常調(diào)用了:
'use strict'; var log = _.bind(console.log, console); log('Hello, world!'); // 輸出Hello, world!
partial
partial()就是為一個函數(shù)創(chuàng)建偏函數(shù)。偏函數(shù)是什么東東?看例子:
假設(shè)我們要計算xy,這時只需要調(diào)用Math.pow(x, y)就可以了。
假設(shè)我們經(jīng)常計算2y,每次都寫Math.pow(2, y)就比較麻煩,如果創(chuàng)建一個新的函數(shù)能直接這樣寫pow2N(y)就好了,這個新函數(shù)pow2N(y)就是根據(jù)Math.pow(x, y)創(chuàng)建出來的偏函數(shù),它固定住了原函數(shù)的第一個參數(shù)(始終為2):
'use strict'; var pow2N = _.partial(Math.pow, 2); pow2N(3); // 8 pow2N(5); // 32 pow2N(10); // 1024
如果我們不想固定第一個參數(shù),想固定第二個參數(shù)怎么辦?比如,希望創(chuàng)建一個偏函數(shù)cube(x),計算x3,可以用_作占位符,固定住第二個參數(shù):
'use strict'; var cube = _.partial(Math.pow, _, 3); cube(3); // 27 cube(5); // 125 cube(10); // 1000
可見,創(chuàng)建偏函數(shù)的目的是將原函數(shù)的某些參數(shù)固定住,可以降低新函數(shù)調(diào)用的難度。
memoize
如果一個函數(shù)調(diào)用開銷很大,我們就可能希望能把結(jié)果緩存下來,以便后續(xù)調(diào)用時直接獲得結(jié)果。舉個例子,計算階乘就比較耗時:
'use strict'; function factorial(n) { console.log('start calculate ' + n + '!...'); var s = 1, i = n; while (i > 1) { s = s * i; i --; } console.log(n + '! = ' + s); return s; } factorial(10); // 3628800 // 注意控制臺輸出: // start calculate 10!... // 10! = 3628800 用memoize()就可以自動緩存函數(shù)計算的結(jié)果: 'use strict'; var factorial = _.memoize(function(n) { console.log('start calculate ' + n + '!...'); var s = 1, i = n; while (i > 1) { s = s * i; i --; } console.log(n + '! = ' + s); return s; }); // 第一次調(diào)用: factorial(10); // 3628800 // 注意控制臺輸出: // start calculate 10!... // 10! = 3628800 // 第二次調(diào)用: factorial(10); // 3628800 // 控制臺沒有輸出
對于相同的調(diào)用,比如連續(xù)兩次調(diào)用factorial(10),第二次調(diào)用并沒有計算,而是直接返回上次計算后緩存的結(jié)果。不過,當(dāng)你計算factorial(9)的時候,仍然會重新計算。
可以對factorial()進(jìn)行改進(jìn),讓其遞歸調(diào)用:
'use strict'; var factorial = _.memoize(function(n) { console.log('start calculate ' + n + '!...'); if (n < 2) { return 1; } return n * factorial(n - 1); }); factorial(10); // 3628800 // 輸出結(jié)果說明factorial(1)~factorial(10)都已經(jīng)緩存了: // start calculate 10!... // start calculate 9!... // start calculate 8!... // start calculate 7!... // start calculate 6!... // start calculate 5!... // start calculate 4!... // start calculate 3!... // start calculate 2!... // start calculate 1!... factorial(9); // 362880 // console無輸出
once
顧名思義,once()保證某個函數(shù)執(zhí)行且僅執(zhí)行一次。如果你有一個方法叫register(),用戶在頁面上點(diǎn)兩個按鈕的任何一個都可以執(zhí)行的話,就可以用once()保證函數(shù)僅調(diào)用一次,無論用戶點(diǎn)擊多少次:
'use strict'; var register = _.once(function () { alert('Register ok!'); }); // 測試效果: register(); register(); register();
delay
delay()可以讓一個函數(shù)延遲執(zhí)行,效果和setTimeout()是一樣的,但是代碼明顯簡單了:
'use strict'; // 2秒后調(diào)用alert(): _.delay(alert, 2000); 如果要延遲調(diào)用的函數(shù)有參數(shù),把參數(shù)也傳進(jìn)去: 'use strict'; var log = _.bind(console.log, console); _.delay(log, 2000, 'Hello,', 'world!'); // 2秒后打印'Hello, world!':
相關(guān)文章
js 定時器setTimeout無法調(diào)用局部變量的解決辦法
javascript中定時器setTimeout無法調(diào)用局部變量,只需要將setTimeout的第一個參數(shù)改成函數(shù)對象,而不是字符串,就可以了2013-11-11javascript:history.go()和History.back()的區(qū)別及應(yīng)用
為提高用戶體驗(yàn)度,可能會使用到刷新 前進(jìn) 后退等相關(guān)更能,本文將以此問題詳細(xì)介紹javascript:history.go()和History.back()的區(qū)別及應(yīng)用,需要的朋友可以參考下2012-11-11用cookies實(shí)現(xiàn)的可記憶的樣式切換效果代碼下載
比較不錯的用cookies實(shí)現(xiàn)的可記憶的樣式切換效果,這個思路也在一定程序,方便客戶的長期使用。2007-12-12兩種js監(jiān)聽滾輪事件的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄獌煞Njs監(jiān)聽滾輪事件的實(shí)現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05JS前端認(rèn)證授權(quán)技巧歸納總結(jié)
這篇文章主要為大家介紹了JS前端認(rèn)證授權(quán)技巧歸納總結(jié),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03