高階函數(shù)的定義

在《javascript設(shè)計模式和開發(fā)實踐》中是這樣定義的。

• 函數(shù)可以作為參數(shù)被傳遞；
• 函數(shù)可以作為返回值輸出。

結(jié)合這兩個特點，首先想到的肯定是回調(diào)函數(shù)，回調(diào)函數(shù)也是高階函數(shù)的一種，除了回調(diào)函數(shù)，還有很多的高階函數(shù)，這篇文章主要是惰性函數(shù)、柯里化函數(shù)、compose函數(shù)這三種。

一、惰性函數(shù)

概念

懶，執(zhí)行過一遍的東西，如果第二遍執(zhí)行還是一樣的效果，則我們就不想讓其重復(fù)執(zhí)行第二遍了

栗子

我們要封裝一個獲取元素屬性的方法，因為低版本的ie瀏覽器不支持getComputedStyle方法，做了一個容錯處理

function getCss(element, attr) {if ('getComputedStyle' in window) {return window.getComputedStyle(element)[attr];}return element.currentStyle[attr]; }

但是每次進這個方法都要做一下判斷，為了提高性能，我們可以存一個變量，然后每次進去判斷變量就好了

var flag = 'getComputedStyle' in window function getCss(element, attr) {if (flag) {return window.getComputedStyle(element)[attr];}return element.currentStyle[attr]; }

這樣每一次還是需要判斷，有沒有更好的方法呢？惰性函數(shù)的思想就可以完美解決這個問題

function getCss(element, attr) {if ('getComputedStyle' in window) {getCss = function (element, attr) {return window.getComputedStyle(element)[attr];};} else {getCss = function (element, attr) {return element.currentStyle[attr];};}// 為了第一次也能拿到值return getCss(element, attr); }getCss(document.body, 'margin'); getCss(document.body, 'padding'); getCss(document.body, 'width');

第一次執(zhí)行，如果有g(shù)etComputedStyle這個方法，getCss就被賦值成

function (element, attr) {return window.getComputedStyle(element)[attr]; };

而后的每一次就會執(zhí)行上面這個函數(shù)，否則則相反

總結(jié)

惰性載入函數(shù)有兩個主要優(yōu)點，

• 1、是顯而易見的效率問題，雖然在第一次執(zhí)行的時候函數(shù)會意味賦值而執(zhí)行的慢一些，但是后續(xù)的調(diào)用會因為避免的重復(fù)檢測更快；
• 2、是要執(zhí)行的適當(dāng)代碼只有當(dāng)實際調(diào)用函數(shù)是才執(zhí)行，很多JavaScript庫在在加載的時候就根據(jù)瀏覽器不同而執(zhí)行很多分支，把所有東西實現(xiàn)設(shè)置好，而惰性載入函數(shù)將計算延遲，不影響初始腳本的執(zhí)行時間。

二、函數(shù)柯理化

定義

利用閉包保存機制，把一些信息預(yù)先存儲下來（預(yù)處理的思想）

function fn() {} let res = fn(1, 2)(3); console.log(res); //=>6 1+2+3

封裝一個方法，調(diào)用以后求出和（兩次執(zhí)行的傳參個數(shù)都不固定）

解題思路：

函數(shù)第二次執(zhí)行，第一個函數(shù)的返回值一定是一個函數(shù),第二個函數(shù)的返回值應(yīng)該是求和的數(shù)值function fn(...outerArgs) {return function anonymous(...innerArgs) {// args:外層和里層函數(shù)傳遞的所有值都合并在一起let args = outerArgs.concat(innerArgs);return args.reduce((n, item) => n + item);}; }

第二個函數(shù)使用了第一個函數(shù)的值，所以函數(shù)1不會被釋放，利用閉包的保護機制，將值預(yù)先保存起來

三、compose函數(shù)

定義

組合函數(shù)，把多層函數(shù)嵌套調(diào)用扁平化

栗子

下面四個方法，每種方法都會把參數(shù)0進行處理，給x傳一個值如果要得出四種方法以后的和：

const fn1 = (x, y) => x + y + 10; const fn2 = x => x - 10; const fn3 = x => x * 10; const fn4 = x => x / 10;let res = fn4(fn2(fn3(fn1(20)))); let res1 = compose(fn1, fn3, fn2, fn4)(20, 30);

res得出的值，可以實現(xiàn)這個需求，但是需要函數(shù)套函數(shù)，現(xiàn)在可以定義一個compose函數(shù)，使得res和res1的值相等，將函數(shù)實現(xiàn)扁平化

function compose(...funcs) {// FUNCS:存儲按照順序執(zhí)行的函數(shù)(數(shù)組) =>[fn1, fn3, fn2, fn4]return function anonymous(...args) {// ARGS:存儲第一個函數(shù)執(zhí)行需要傳遞的實參信息(數(shù)組) =>[20]if (funcs.length === 0) return args;if (funcs.length === 1) return funcs[0](...args);return funcs.reduce((N, func) => {// 第一次N的值:第一個函數(shù)執(zhí)行的實參 func是第一個函數(shù)// 第二次N的值:上一次func執(zhí)行的返回值，作為實參傳遞給下一個函數(shù)執(zhí)行return Array.isArray(N) ? func(...N) : func(N);}, args);}; }

完美實現(xiàn)compose函數(shù)，不用再函數(shù)套函數(shù)

react中的redux源碼中的compose函數(shù)用的是另外思想實現(xiàn)的

四、單例設(shè)計模式

定義

var obj1 = {name: 'wanghuahua' } var obj2 = {name: 'jerry' } console.log(obj1.name) console.log(obj2.name)

上面的兩個obj就是最基礎(chǔ)的單例

單例模式就是：用單獨的實例來管理當(dāng)前事物的相關(guān)特征[屬性和方法]（類似于實現(xiàn)一個分組的特點）

而此時obj1/obj2不僅僅叫做一個對象，也被成為命名空間

特點

• 類只有一個實例
• 全局可訪問該實例
• 自行實例化（主動實例化）
• 可推遲初始化，即延遲執(zhí)行（與靜態(tài)類/對象的區(qū)別）

雖然全局變量可以實現(xiàn)單例，但因其自身的問題，不建議在實際項目中將其作為單例模式的應(yīng)用，特別是中大型項目的應(yīng)用中，全局變量的維護該是考慮的成本。

高級單例設(shè)計模式

基于閉包管控的單例模式稱為：高級單例設(shè)計模式，以此來實現(xiàn)模塊劃分（最早的模塊化思想）

let wanghuahua = (function () {function query() {}function tools() {}return {name: 'AREA',tools}; })(); wanghuahua.tools();let jerry = (function () {function fn() {meimei.getXxx();}function query() {}return {query} })();let meimei = (function () {function fn() {}function getXxx() {}jerry.query();return {getXxx} })(); // 每個模塊都可以有自己私有的方法，想要暴露給全局的就return出去// es6的export已經(jīng)不需要這么寫了公眾號：

總結(jié)

以上是生活随笔為你收集整理的export function函数传参_04 js高阶函数（惰性函数、柯里化函数、compose函数）和单例设计模式...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。