高階函數的定義

在《javascript設計模式和開發實踐》中是這樣定義的。

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

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

一、惰性函數

概念

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

栗子

我們要封裝一個獲取元素屬性的方法，因為低版本的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]; }

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

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');

第一次執行，如果有getComputedStyle這個方法，getCss就被賦值成

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

而后的每一次就會執行上面這個函數，否則則相反

總結

惰性載入函數有兩個主要優點，

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

二、函數柯理化

定義

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

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

封裝一個方法，調用以后求出和（兩次執行的傳參個數都不固定）

解題思路：

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

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

三、compose函數

定義

組合函數，把多層函數嵌套調用扁平化

栗子

下面四個方法，每種方法都會把參數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得出的值，可以實現這個需求，但是需要函數套函數，現在可以定義一個compose函數，使得res和res1的值相等，將函數實現扁平化

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

完美實現compose函數，不用再函數套函數

react中的redux源碼中的compose函數用的是另外思想實現的

四、單例設計模式

定義

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

上面的兩個obj就是最基礎的單例

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

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

特點

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

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

高級單例設計模式

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

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已經不需要這么寫了公眾號：

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。