Jamey's Jamey's
首页
导航站
  • 学习专栏

    • 《HTML》笔记
    • 《CSS》笔记
    • 《JavaScript》笔记
    • 《Vue》笔记
    • 《Git》笔记
    • 《规范》笔记
    • 《软技能》笔记
    • 《面试》笔记
    • 《持续集成&交付&部署》笔记
  • 踩坑专栏

    • 《Element-UI 实践系列》笔记
    • 《移动端 实践系列》笔记
    • 《综合》笔记
  • 配置专栏

    • 《环境系列》笔记
  • 极空间

    • Docker
  • 影视

    • movie
  • 编辑器笔记

    • 开发编辑器
  • 浏览器笔记

    • Chrome
  • Mac笔记

    • Mac
  • 跨界学习

    • 运营
  • 破解合集

    • 破解
  • 本站

    • 分类
    • 标签
    • 归档
  • 我的

    • 收藏
    • 书单
    • 关于

Jamey

首页
导航站
  • 学习专栏

    • 《HTML》笔记
    • 《CSS》笔记
    • 《JavaScript》笔记
    • 《Vue》笔记
    • 《Git》笔记
    • 《规范》笔记
    • 《软技能》笔记
    • 《面试》笔记
    • 《持续集成&交付&部署》笔记
  • 踩坑专栏

    • 《Element-UI 实践系列》笔记
    • 《移动端 实践系列》笔记
    • 《综合》笔记
  • 配置专栏

    • 《环境系列》笔记
  • 极空间

    • Docker
  • 影视

    • movie
  • 编辑器笔记

    • 开发编辑器
  • 浏览器笔记

    • Chrome
  • Mac笔记

    • Mac
  • 跨界学习

    • 运营
  • 破解合集

    • 破解
  • 本站

    • 分类
    • 标签
    • 归档
  • 我的

    • 收藏
    • 书单
    • 关于
  • 深入系列

  • 专题系列

    • 写在前面
    • JavaScript 专题之跟着 underscore 学防抖
    • JavaScript 专题之跟着 underscore 学节流
    • JavaScript 专题之数组去重
    • JavaScript 专题之类型判断(上)
    • JavaScript 专题之类型判断(下)
    • JavaScript 专题之深浅拷贝
    • JavaScript 专题之从零实现 jQuery 的 extend
    • JavaScript 专题之如何求数组的最大值和最小值
    • JavaScript 专题之数组扁平化
    • JavaScript 专题之学 underscore 在数组中查找指定元素
    • JavaScript 专题之 jQuery 通用遍历方法 each 的实现
    • JavaScript 专题之如何判断两个对象相等
    • JavaScript 专题之函数柯里化
    • JavaScript 专题之偏函数
      • 一. 定义
      • 二. 柯里化与局部应用
      • 三. partial
      • 四. 第一版
      • 五. 第二版
      • 六. 写在最后
    • JavaScript 专题之惰性函数
    • JavaScript 专题之函数组合
    • JavaScript 专题之函数记忆
    • JavaScript 专题之递归
    • JavaScript 专题之乱序
    • JavaScript 专题之解读 v8 排序源码
  • underscore系列

  • ES6系列

  • 模块化

  • 正则表达式

  • 单元测试

  • 微前端

  • 实用函数

  • Rollup

  • 解决方案

  • 《JavaScript》笔记
  • 专题系列
Jamey
2021-11-03
目录

JavaScript 专题之偏函数

# JavaScript 专题之偏函数

# 一. 定义

维基百科中对偏函数 (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
1
2
3
4
5
6
7
8
9
10
11

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

# 二. 柯里化与局部应用

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

其实也很明显:

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

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

如果说两者有什么关系的话,引用 functional-programming-jargon (opens new window) 中的描述就是:

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
1
2
3
4
5
6
7

然而使用 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);
  };
};
1
2
3
4
5
6
7
8
9

我们来写个 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 五. 第二版

然而正如 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(arguments[position++]);
    return fn.apply(this, args);
  };
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

我们验证一下:

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

# 六. 写在最后

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

#JavaScript 专题
上次更新: 2022/07/01, 17:34:19
JavaScript 专题之函数柯里化
JavaScript 专题之惰性函数

← JavaScript 专题之函数柯里化 JavaScript 专题之惰性函数→

Theme by Vdoing | Copyright © 2017-2023 Jamey | blog 闽ICP备19022664号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式