underscore 系列之內部函數 restArgs 詳情 - javascript,underscore,underscore系列冴羽博客

partial

在《 JavaScript 專題之偏函數》中，我們寫了一個 partial 函數，用來固定函數的部分參數，實現代碼如下：

// 這是文章中的第一版
function partial(fn) {
    var args = [].slice.call(arguments, 1);
    return function() {
        var newArgs = args.concat([].slice.call(arguments));
        return fn.apply(this, newArgs);
    };
};

rest parameter

ES6 為我們提供了剩餘參數（rest parameter）語法，允許我們將一個不定數量的參數表示為一個數組。

function fn(a, b, ...args) {
   console.log(args); // [3, 4, 5]
}

fn(1, 2, 3, 4, 5)

我們可以利用這一特性簡化 partial 實現的代碼：

function partial(fn, ...args) {
    return function(...partialArgs) {
        var newArgs = args.concat(partialArgs);
        return fn.apply(this, newArgs);
    };
};

寫個 demo，測試一下：

function add(a, b) {
    return a + b;
}

var addOne = partial(add, 1);

console.log(addOne(2)); // 3

restArgs

如果不使用 ... 拓展操作符，僅用 ES5 的內容，該怎麼實現呢？

我們可以寫一個 restArgs 函數，傳入一個函數，使用函數的最後一個參數儲存剩下的函數參數，使用效果如下：

var func = restArgs(function(a, b, c){
    console.log(c); // [3, 4, 5]
})

func(1, 2, 3, 4, 5)

我們來寫一版：

// 第一版
function restArgs(func) {
    return function(){
        // startIndex 表示使用哪個位置的參數用於儲存剩餘的參數
        var startIndex = func.length - 1;
        var length = arguments.length - startIndex;

        var rest = Array(length)
        var index = 0;

        // 使用一個數組儲存剩餘的參數
        // 以上面的例子為例，結果為：
        // rest [3, 4, 5]
        for (; index < length; index++) {
            rest[index] = arguments[index + startIndex]
        }

        // args [1, 2, undefined]
        var args = Array(startIndex + 1);
        for (index = 0; index < startIndex; index++) {
            args[index] = arguments[index]
        }

        // args [1, 2, [3, 4, 5]]
        args[startIndex] = rest;

        return func.apply(this, args)
    }
}

優化

我們默認使用傳入的函數的最後一個參數儲存剩餘的參數，為了更加靈活，我們可以再增加一個參數，用來指定 startIndex，如果沒有指定，就默認使用最後一個參數。

此外，注意，我們使用 Array(length) 創建數組，而 length 的計算方式是 arguments.length - startIndex，這個值有可能是負數！比如：

var func = restArgs(function(a, b, c, d){
    console.log(c) // 報錯
})

func(1, 2)

所以我們再寫一版：

// 第二版
function restArgs(func, startIndex) {
    startIndex = startIndex == null ? func.length - 1 : +startIndex;
    return function(){
        var length = Math.max(arguments.length - startIndex, 0);
        var rest = Array(length)
        var index = 0;
        for (; index < length; index++) {
            rest[index] = arguments[index + startIndex]
        }

        var args = Array(startIndex + 1);
        for (index = 0; index < startIndex; index++) {
            args[index] = arguments[index]
        }

        args[startIndex] = rest;
        return func.apply(this, args)
    }
}

性能優化

如果是正常寫業務，可能寫到這裏就結束了，然而 underscore 考慮的更多，鑑於 call 的性能要高於 apply，所以 underscore 做了一個優化：

// 第三版
var restArgs = function(func, startIndex) {
    startIndex = startIndex == null ? func.length - 1 : +startIndex;
    return function() {
        var length = Math.max(arguments.length - startIndex, 0),
            rest = Array(length),
            index = 0;

        for (; index < length; index++) {
            rest[index] = arguments[index + startIndex];
        }

        // 增加的部分
        switch (startIndex) {
            case 0:
                return func.call(this, rest);
            case 1:
                return func.call(this, arguments[0], rest);
            case 2:
                return func.call(this, arguments[0], arguments[1], rest);
        }

        var args = Array(startIndex + 1);
        for (index = 0; index < startIndex; index++) {
            args[index] = arguments[index];
        }

        args[startIndex] = rest;
        return func.apply(this, args);
    };
};

至此，restArgs 函數就完成了，underscore 很多函數比如 invoke、without、union、difference、bind、partial、bindAll、delay 都用到了 restArgs 函數。

當使用 underscore 的時候，我們可以以 _.restArgs 的形式調用該函數。

restArgs 與 partial

最後，使用我們的寫的 restArgs 函數重寫下 partial 函數：

var partial = restArgs(function(fn, args){
    return restArgs(function(partialArgs) {
        var newArgs = args.concat(partialArgs);
        return fn.apply(this, newArgs);
    })
})

function add(a, b, c) {
    return a + b + c;
}

var addOne = partial(add, 1);
console.log(addOne(2, 3)); // 6