链式调用是一种流行的编程模式，它允许我们连续地调用对象的方法，将多个操作串联起来。在前端开发中，我们经常使用 jQuery 的链式调用，比如：
$('#myDiv').addClass('myClass').hide().fadeIn(1000);这条代码的作用是给 ID 为 myDiv 的元素添加一个名为 myClass 的 class，然后将其隐藏并淡入 1000 毫秒。看起来非常简洁明了，而且不需要写冗长的回调函数。那么如何在自己的代码中实现链式调用呢？本文将介绍如何使用 ES6 的 Map 类型来实现链式调用。
ES6 的 Map 类型
ES6 引入了新的数据类型 Map，它是一种高效的键值对集合。Map 中的键可以是任意类型，而不仅仅是字符串或数字，同时它也支持链式调用。
使用 Map 类型创建一个对象非常简单：
const myMap = new Map();
我们也可以传入一个数组来初始化 Map：
const myMap = new Map([ ['key1', 'value1'], ['key2', 'value2'], ['key3', 'value3'] ]);
当然，你也可以使用 Map 的 set 方法来添加键值对：
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
myMap.set('key3', 'value3');实现链式调用
我们可以使用 Map 类型来实现链式调用。首先，我们需要创建一个 Map 对象来保存方法和其对应的参数。
class Chain {
constructor() {
this.map = new Map();
}
}接下来，我们可以定义一个 set 方法来将方法和其对应的参数添加到 Map 中。注意，set 方法需要返回 this，以便支持链式调用。
-- -------------------- ---- -------
----- ----- -
------------- -
-------- - --- ------
-
----------- -------- -
-------------------- ------
------ -----
-
-接下来，我们需要定义一个 execute 方法来按照 Map 中的顺序执行方法和参数。我们可以使用 reduce 来遍历 Map，并调用对应的方法。方法执行的结果可以传递给下一个方法。
-- -------------------- ---- -------
----- ----- -
------------- -
-------- - --- ------
-
----------- -------- -
-------------------- ------
------ -----
-
--------------------- -
------ ----------------------------- -------- ------ -- -
------ ------------------------
-- --------------
-
-最后，我们可以定义一些常用的方法来简化代码：
-- -------------------- ---- -------
----- ----- -
------------- -
-------- - --- ------
-
----------- -------- -
-------------------- ------
------ -----
-
--------------------- -
------ ----------------------------- -------- ------ -- -
------ ------------------------
-- --------------
-
------------------- -
------ -------------------- -----------
-
------ -
------ -----------------
-
---------------- -
------ ------------------ ----------
-
-现在，我们就可以使用我们自己的链式调用了：
$('#myDiv').addClass('myClass').hide().fadeIn(1000);变成了：
const myDiv = new Chain();
myDiv.addClass('myClass').hide().fadeIn(1000).execute($('#myDiv'));总结
ES6 的 Map 类型提供了一种简单而高效的方式来实现链式调用。通过将方法和其对应的参数存储在 Map 中，并使用 reduce 来按顺序执行它们，我们可以开发出自己的链式调用库。值得注意的是，虽然使用 Map 可以让我们编写更加简洁和方便的代码，但是它并不是实现链式调用的唯一方式，我们可以根据实际情况选择适合自己的方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a52f4e48841e98941a9f4b