JavaScript專(zhuān)題之偏函數(shù)

beita 發(fā)布于2019-08-22 10:53 / 1824人閱讀

摘要：專(zhuān)題系列第十四篇，講解偏函數(shù)以及如何實(shí)現(xiàn)一個(gè)函數(shù)定義維基百科中對(duì)偏函數(shù)的定義為翻譯成中文在計(jì)算機(jī)科學(xué)中，局部應(yīng)用是指固定一個(gè)函數(shù)的一些參數(shù)，然后產(chǎn)生另一個(gè)更小元的函數(shù)。

JavaScript 專(zhuān)題系列第十四篇，講解偏函數(shù)以及如何實(shí)現(xiàn)一個(gè) partial 函數(shù)

定義

維基百科中對(duì)偏函數(shù) (Partial application) 的定義為：

In computer science, partial application (or partial function application) refers to the process of fixing a number of arguments to a function, producing another function of smaller arity.

翻譯成中文：

在計(jì)算機(jī)科學(xué)中，局部應(yīng)用是指固定一個(gè)函數(shù)的一些參數(shù)，然后產(chǎn)生另一個(gè)更小元的函數(shù)。

什么是元？元是指函數(shù)參數(shù)的個(gè)數(shù)，比如一個(gè)帶有兩個(gè)參數(shù)的函數(shù)被稱(chēng)為二元函數(shù)。

舉個(gè)簡(jiǎn)單的例子：

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

// 執(zhí)行 add 函數(shù)，一次傳入兩個(gè)參數(shù)即可
add(1, 2) // 3

// 假設(shè)有一個(gè) partial 函數(shù)可以做到局部應(yīng)用
var addOne = partial(add, 1);

addOne(2) // 3

個(gè)人覺(jué)得翻譯成“局部應(yīng)用”或許更貼切些，以下全部使用“局部應(yīng)用”。

柯里化與局部應(yīng)用

如果看過(guò)上一篇文章《JavaScript專(zhuān)題之柯里化》，實(shí)際上你會(huì)發(fā)現(xiàn)這個(gè)例子和柯里化太像了，所以?xún)烧叩降资怯惺裁磪^(qū)別呢？

其實(shí)也很明顯：

柯里化是將一個(gè)多參數(shù)函數(shù)轉(zhuǎn)換成多個(gè)單參數(shù)函數(shù)，也就是將一個(gè) n 元函數(shù)轉(zhuǎn)換成 n 個(gè)一元函數(shù)。

局部應(yīng)用則是固定一個(gè)函數(shù)的一個(gè)或者多個(gè)參數(shù)，也就是將一個(gè) n 元函數(shù)轉(zhuǎn)換成一個(gè) n - x 元函數(shù)。

如果說(shuō)兩者有什么關(guān)系的話，引用 functional-programming-jargon 中的描述就是：

Curried functions are automatically partially applied.

partial

我們今天的目的是模仿 underscore 寫(xiě)一個(gè) partial 函數(shù)，比起 curry 函數(shù)，這個(gè)顯然簡(jiǎn)單了很多。

也許你在想我們可以直接使用 bind 吶，舉個(gè)例子：

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

var addOne = add.bind(null, 1);

addOne(2) // 3

然而使用 bind 我們還是改變了 this 指向，我們要寫(xiě)一個(gè)不改變 this 指向的方法。

第一版

根據(jù)之前的表述，我們可以嘗試著寫(xiě)出第一版：

// 第一版
// 似曾相識(shí)的代碼
function partial(fn) {
    var args = [].slice.call(arguments, 1);
    return function() {
        var newArgs = args.concat([].slice.call(arguments));
        return fn.apply(this, newArgs);
    };
};

我們來(lái)寫(xiě)個(gè) demo 驗(yàn)證下 this 的指向：

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

// var addOne = add.bind(null, 1);
var addOne = partial(add, 1);

var value = 1;
var obj = {
    value: 2,
    addOne: addOne
}
obj.addOne(2); // ???
// 使用 bind 時(shí)，結(jié)果為 4
// 使用 partial 時(shí)，結(jié)果為 5

第二版

然而正如 curry 函數(shù)可以使用占位符一樣，我們希望 partial 函數(shù)也可以實(shí)現(xiàn)這個(gè)功能，我們?cè)賮?lái)寫(xiě)第二版：

// 第二版
var _ = {};

function partial(fn) {
    var args = [].slice.call(arguments, 1);
    return function() {
        var position = 0, len = args.length;
        for(var i = 0; i < len; i++) {
            args[i] = args[i] === _ ? arguments[position++] : args[i]
        }
        while(position < arguments.length) args.push(argumetns[position++]);
        return fn.apply(this, args);
    };
};

我們驗(yàn)證一下：

var subtract = function(a, b) { return b - a; };
subFrom20 = partial(subtract, _, 20);
subFrom20(5);

寫(xiě)在最后

值得注意的是：underscore 和 lodash 都提供了 partial 函數(shù)，但只有 lodash 提供了 curry 函數(shù)。

專(zhuān)題系列

JavaScript專(zhuān)題系列目錄地址：https://github.com/mqyqingfeng/Blog。

JavaScript專(zhuān)題系列預(yù)計(jì)寫(xiě)二十篇左右，主要研究日常開(kāi)發(fā)中一些功能點(diǎn)的實(shí)現(xiàn)，比如防抖、節(jié)流、去重、類(lèi)型判斷、拷貝、最值、扁平、柯里、遞歸、亂序、排序等，特點(diǎn)是研(chao)究(xi) underscore 和 jQuery 的實(shí)現(xiàn)方式。

如果有錯(cuò)誤或者不嚴(yán)謹(jǐn)?shù)牡胤剑?qǐng)務(wù)必給予指正，十分感謝。如果喜歡或者有所啟發(fā)，歡迎 star，對(duì)作者也是一種鼓勵(lì)。