再谈underscore链式调用

2023-09-05 11:31:11

再谈 underscore 链式调用

在上一篇文章《underscore 系列之如何写自己的 underscore》中，我们已经了解了如何使用 JavaScript 中的原型链机制来实现自己的 underscore。在这篇文章中，我们将进一步探讨 underscore 的链式调用是如何实现的。

链式调用是指在 JavaScript 中连续调用多个方法，并返回同一个对象。这使得我们可以将多个操作组合成一个连续的操作序列，从而简化代码并提高可读性。

jQuery 之所以能够实现链式调用，关键就在于通过 return this，返回调用对象。再精简一下示例代码，如下所示：

jQuery.prototype.fn = {
  underscore: function() {
    // underscore函数的内容
    return this;
  }
};

该对象的原型上有着 underscore 函数，我们说函数是个一等公民，是对象的一种，函数的对象有着原型，所以具备了原型链的能力，this.fn 与 jQuery.prototype.fn 等价。

让我们来看一个使用 jQuery 的链式调用的示例：

$('div').css('color', 'red').hide();

在这个示例中，我们首先使用 $() 函数选择所有 div 元素，然后使用 css() 方法为这些元素设置颜色为红色，最后使用 hide() 方法隐藏这些元素。

我们可以看到，这些方法都是连续调用的，并且返回的都是同一个对象，即 $('div')。这使得我们能够将多个操作组合成一个连续的操作序列，从而简化代码并提高可读性。

underscore 的链式调用也是通过同样的原理实现的。underscore 提供了许多函数，这些函数都可以返回调用对象。这使得我们可以将多个 underscore 函数组合成一个连续的操作序列，从而简化代码并提高可读性。

例如，我们可以使用 underscore 的 map() 函数将一个数组中的所有元素映射到另一个数组中，然后使用 filter() 函数过滤掉不满足某个条件的元素，最后使用 reduce() 函数将剩余的元素组合成一个值。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = _.map(numbers, (number) => number * 2);
const filteredNumbers = _.filter(evenNumbers, (number) => number > 10);
const sumOfNumbers = _.reduce(filteredNumbers, (memo, number) => memo + number, 0);

console.log(sumOfNumbers); // 110