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