04 js高階函數(shù)（惰性函數(shù)锅睛、柯里化函數(shù)天试、compose函數(shù)）和單例設(shè)計模式

高階函數(shù)的定義

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

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

結(jié)合這兩個特點(diǎn)屎鳍，首先想到的肯定是回調(diào)函數(shù)宏娄，回調(diào)函數(shù)也是高階函數(shù)的一種，除了回調(diào)函數(shù)逮壁，還有很多的高階函數(shù)孵坚，這篇文章主要是惰性函數(shù)、柯里化函數(shù)窥淆、compose函數(shù)這三種卖宠。

一、惰性函數(shù)

概念

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

栗子

我們要封裝一個獲取元素屬性的方法眷昆，因?yàn)榈桶姹镜膇e瀏覽器不支持getComputedStyle方法蜒秤，做了一個容錯處理

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

但是每次進(jìn)這個方法都要做一下判斷汁咏，為了提高性能，我們可以存一個變量作媚，然后每次進(jìn)去判斷變量就好了

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)點(diǎn)女揭，

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

二、函數(shù)柯理化

定義

利用閉包保存機(jī)制吴藻，把一些信息預(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不會被釋放疮鲫，利用閉包的保護(hù)機(jī)制吆你，將值預(yù)先保存起來

三弦叶、compose函數(shù)

定義

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

栗子

下面四個方法妇多，每種方法都會把參數(shù)0進(jìn)行處理伤哺，給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得出的值，可以實(shí)現(xiàn)這個需求者祖，但是需要函數(shù)套函數(shù)立莉，現(xiàn)在可以定義一個compose函數(shù)，使得res和res1的值相等七问，將函數(shù)實(shí)現(xiàn)扁平化

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

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

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

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

定義

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

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

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

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

特點(diǎn)

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

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

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

基于閉包管控的單例模式稱為：高級單例設(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)不需要這么寫了

公眾號：

image

04 js高階函數(shù)（惰性函數(shù)、柯里化函數(shù)振坚、compose函數(shù)）和單例設(shè)計模式

04 js高階函數(shù)（惰性函數(shù)薇搁、柯里化函數(shù)、compose函數(shù)）和單例設(shè)計模式