JavaScript专题之偏函数

beita 发布于2019-08-22 10:53 / 1799人阅读

摘要：专题系列第十四篇，讲解偏函数以及如何实现一个函数定义维基百科中对偏函数的定义为翻译成中文在计算机科学中，局部应用是指固定一个函数的一些参数，然后产生另一个更小元的函数。

JavaScript 专题系列第十四篇，讲解偏函数以及如何实现一个 partial 函数

定义

维基百科中对偏函数 (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.

翻译成中文：

在计算机科学中，局部应用是指固定一个函数的一些参数，然后产生另一个更小元的函数。

什么是元？元是指函数参数的个数，比如一个带有两个参数的函数被称为二元函数。

举个简单的例子：

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

// 执行 add 函数，一次传入两个参数即可
add(1, 2) // 3

// 假设有一个 partial 函数可以做到局部应用
var addOne = partial(add, 1);

addOne(2) // 3

个人觉得翻译成“局部应用”或许更贴切些，以下全部使用“局部应用”。

柯里化与局部应用

如果看过上一篇文章《JavaScript专题之柯里化》，实际上你会发现这个例子和柯里化太像了，所以两者到底是有什么区别呢？

其实也很明显：

柯里化是将一个多参数函数转换成多个单参数函数，也就是将一个 n 元函数转换成 n 个一元函数。

局部应用则是固定一个函数的一个或者多个参数，也就是将一个 n 元函数转换成一个 n - x 元函数。

如果说两者有什么关系的话，引用 functional-programming-jargon 中的描述就是：

Curried functions are automatically partially applied.

partial

我们今天的目的是模仿 underscore 写一个 partial 函数，比起 curry 函数，这个显然简单了很多。

也许你在想我们可以直接使用 bind 呐，举个例子：

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

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

addOne(2) // 3

然而使用 bind 我们还是改变了 this 指向，我们要写一个不改变 this 指向的方法。

第一版

根据之前的表述，我们可以尝试着写出第一版：

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

我们来写个 demo 验证下 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 时，结果为 4
// 使用 partial 时，结果为 5

第二版

然而正如 curry 函数可以使用占位符一样，我们希望 partial 函数也可以实现这个功能，我们再来写第二版：

// 第二版
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);
    };
};

我们验证一下：

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

写在最后

值得注意的是：underscore 和 lodash 都提供了 partial 函数，但只有 lodash 提供了 curry 函数。

专题系列

JavaScript专题系列目录地址：https://github.com/mqyqingfeng/Blog。

JavaScript专题系列预计写二十篇左右，主要研究日常开发中一些功能点的实现，比如防抖、节流、去重、类型判断、拷贝、最值、扁平、柯里、递归、乱序、排序等，特点是研(chao)究(xi) underscore 和 jQuery 的实现方式。

如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。

云服务器 GPU云服务器 javascript专题系列 javascript 函数 javascript函数 JavaScript函数编程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91401.html

JavaScript专题系列文章

摘要：专题系列共计篇，主要研究日常开发中一些功能点的实现，比如防抖节流去重类型判断拷贝最值扁平柯里递归乱序排序等，特点是研究专题之函数组合专题系列第十六篇，讲解函数组合，并且使用柯里化和函数组合实现模式需求我们需要写一个函数，输入，返回。 JavaScript 专题之从零实现 jQuery 的 extend JavaScritp 专题系列第七篇，讲解如何从零实现一个 jQuery 的 ext...

Maxiye 2019-08-21 17:57 评论0 收藏0
JavaScript专题系列20篇正式完结！

摘要：写在前面专题系列是我写的第二个系列，第一个系列是深入系列。专题系列自月日发布第一篇文章，到月日发布最后一篇，感谢各位朋友的收藏点赞，鼓励指正。写在前面 JavaScript 专题系列是我写的第二个系列，第一个系列是 JavaScript 深入系列。 JavaScript 专题系列共计 20 篇，主要研究日常开发中一些功能点的实现，比如防抖、节流、去重、类型判断、拷贝、最值、扁平、柯里...

sixleaves 2019-08-21 17:15 评论0 收藏0
2017-08-16 前端日报

摘要：前端日报精选理解的专题之偏函数译理解事件驱动机制游戏开发前端面试中的常见的算法问题发布中文前端页面传参尚妆产品技术刊读基础系列二之实现大转盘抽奖掘金指南众成翻译编程插入排序众成翻译源码讲解函数技术风暴初体验个人文 2017-08-16 前端日报精选理解 JavaScript 的 async/awaitJavaScript专题之偏函数[译]理解 Node.js 事件驱动机制Pokem...

graf 2019-08-22 10:54 评论0 收藏0
underscore 系列之内部函数 restArgs

摘要：与最后，使用我们的写的函数重写下函数系列系列目录地址。系列预计写八篇左右，重点介绍中的代码架构链式调用内部函数模板引擎等内容，旨在帮助大家阅读源码，以及写出自己的。如果有错误或者不严谨的地方，请务必给予指正，十分感谢。 partial 在《 JavaScript 专题之偏函数》中，我们写了一个 partial 函数，用来固定函数的部分参数，实现代码如下： // 这是文章中的第一版 fu...

zzzmh 2019-08-21 17:55 评论0 收藏0
JavaScript专题之递归

摘要：专题系列第十八篇，讲解递归和尾递归定义程序调用自身的编程技巧称为递归。然而非尾调用函数，就会创建多个执行上下文压入执行上下文栈。所以我们只用把阶乘函数改造成一个尾递归形式，就可以避免创建那么多的执行上下文。 JavaScript 专题系列第十八篇，讲解递归和尾递归定义程序调用自身的编程技巧称为递归(recursion)。阶乘以阶乘为例： function factorial(n...

asoren 2019-08-22 11:05 评论0 收藏0