当前位置：首页 > 全部内容 > 正文

JavaScript 链式调用与异步处理实现解析

作者：代码拾荒

时间：2026-10-30

浏览：192

本文深入解析JavaScript中链式模式的实现原理，从同步条件下的单链表构建到语法糖封装。重点探讨当链式调用包含异步逻辑时的执行顺序问题，通过修改原型链与状态管理实现类似Promise的异步扁平化处理，帮助开发者理解底层机制并优化代码结构。

文章目录

概述

一、概述

在JavaScript开发中，链式调用模式的应用十分广泛。

if_else:


if(...){
  //TODO
}else if(...){
  //TODO
}else{
  //TODO
}

switch:


switch(name){
  case ...:{
    //TODO
    break;
  }
  case ...:{
    //TODO
    break;
  }
  default:{
    //TODO  
  }
}

这里提出一个问题：面对上述复杂的链式代码，我们能否将其处理逻辑进行扁平化重构？

//fn1,f2,f3为处理函数 _if(fn1)._elseIf(fn2)._else(fn3);

接下来，我们将逐步探讨如何实现这一目标。

链式代码扁平化

二、链式代码扁平化

假设存在如下链式代码场景：


if(name === 'Monkey'){
  console.log('yes, I am Monkey');
}else if(name === 'Dorie'){
  console.log('yes, I am Dorie');
}else{
  console.log('sorry, over for ending!');
}

现在，我们分步骤对其进行“扁平化”改造。

观察上述代码结构，可以发现if…else这种格式本质上对应数据结构中的单链表。因此，我们可以初步利用JavaScript实现一个单链表模型，代码如下：


var thens = [];
thens.resolve = function(name){
  for(var i = 0, len = this.length; i < len;i++){
    if(this[i](name) !== 'next'){
      break;
    }
  }
}
thens.push(f1, f2, f3);

其中f1，f2，f3为判断函数，并且我们假设，如果诸如f1、f2、f3返回'next'时，就继续往下查找，否则，停止往下查找。如下：


function f1(name){
  if(name === 'Monkey'){
    console.log('yes, I am Monkey');
  }else{
    return 'next';
  }
}
function f2(name){
  if(name === 'Dorie'){
    console.log('yes, I am Dorie');
  }else{
    return 'next';
  }
}
function f3(){
  console.log('sorry, over for ending!');
}

这就是链表的基本模式。

但是，我们的最终目的是想实现如下这样的呢？

//fn1,f2,f3为处理函数 _if(fn1)._elseIf(fn2)._else(fn3);

你可能会说，将上述代码改成如下这样，不就好了吗？！！

thens.push(f1).push(f2).push(f3).resolve();

But，JavaScript的push方法返回的是数组的新长度，而不是数组对象哦。

So，那我们只能新写一个add方法，效果和push一样，但是返回数组对象。如下：


thens.add = function(f){
  if(typeof f === 'function'){
    this.push(f);
    return this;    
  }    
}

测试代码如下：



var thens = [];
thens.add = function(f){
  if(typeof f === 'function'){
    this.push(f);
    return this;    
  }    
}
thens.resolve = function(name){
  for(var i = 0, len = this.length; i < len;i++){
    if(this[i](name) !== 'next'){
      break;
    }
  }  
}
thens.add(f1).add(f2).add(f3).resolve();

但是，这样有个缺点，我们是将add、resolve方法绑定在全局变量thens中的，总不能每次创建一个数组时，都复制粘贴一遍方法吧，所以重构代码如下：


function Slink(){
  this.thens = [];
  this.thens.add = function(f){
    if(typeof f === 'function'){
      this.push(f);
      return this;    
    }    
  }
  this.thens.resolve = function(name){
    for(var i = 0, len = this.length; i < len;i++){
      if(this[i](name) !== 'next'){
        break;
      }
    }  
  }
}

显然，add，resolve这种公共方法，在每次实例化时，都创建一遍是不科学的，so，利用prototype在原有的基础上继续变形，如下：


function Slink(){
  this.thens = [];
}
Slink.prototype = {
  add: function(f){
      if(typeof f === 'function'){
        this.thens.push(f);
        return this;    
      }    
  },
  resolve: function(name){
      for(var i = 0, len = this.thens.length; i < len; i++){
        if(this.thens[i](name) !== 'next'){
          break;
        }
      }  
  }
}

测试代码如下：

var thens = new Slink(); thens.add(f1).add(f2).add(f3); thens.resolve();

不错，但是这样，我们每次都得手动new一个Slink，有点麻烦，所以，我们将new Slink这个过程，封装到函数中，如同jQuery一样，如下：


function $go(f){
  return new Slink(f);
}
function Slink(f){
  this.thens = [];
  this.thens.push(f);
}
Slink.prototype = {
  add: function(f){
      if(typeof f === 'function'){
        this.thens.push(f);
        return this;    
      }    
  },
  resolve: function(name){
      for(var i = 0, len = this.thens.length; i < len; i++){
        if(this.thens[i](name) !== 'next'){
          break;
        }
      }  
  }
}

测试代码如下：

$go(f1).add(f2).add(f3).resolve();

好了，大功告成，接下来就是语法糖滴问题咯，整理代码如下：


function _if(f){
  return new Slink(f);
}
function Slink(f){
  this.thens = [];
  this.thens.push(f);
}
Slink.prototype = {
  _elseIf: function(f){
      if(typeof f === 'function'){
        this.thens.push(f);
        return this;    
      }    
  },
  _else: function(f){
      return this._elseIf(f);
  },
  resolve: function(name){
      for(var i = 0, len = this.thens.length; i < len; i++){
        if(this.thens[i](name) !== 'next'){
          break;
        }
      }
      return this;      
  }
}

测试代码如下：

_if(f1)._elseIf(f2)._else(f3).resolve();

当然，除开利用数组这种方式，还可以利用闭包，实现链式扁平化效果，如下：


var func = Function.prototype;
func._else = func._elseIf = function(fn){
  var _this = this;
  return function(){
    var res = _this.apply(this,arguments);
    if(res==="next"){ //值为Boolean
      return fn.apply(this,arguments);
    }
    return res;
  }
}

测试代码如下：


function f1(name){
  if(name === 'Monkey'){
    console.log('yes, I am Monkey');
  }else{
    return 'next';
  }
}
function f2(name){
  if(name === 'Dorie'){
    console.log('yes, I am Dorie');
  }else{
    return 'next';
  }
}
function f3(){
  console.log('sorry, over for ending!');
}
f1._elseIf(f2)._else(f3)('Dorie');

异步代码链式扁平化

三、异步代码链式扁平化

在上面我们讨论的都是同步过程，倘若，链式调用函数中有异步情况呢？

什么意思？如下：


function f1(name){
  setTimeout(function(){
    if(name === 'Monkey'){
      console.log('yes, I am Monkey');
    }else{
      return 'next';
    }
  }, 2000);
}
function f2(name){
  if(name === 'Dorie'){
    console.log('yes, I am Dorie');
  }else{
    return 'next';
  }
}
function f3(){
  console.log('sorry, over for ending!');
}

我们将f1利用setTimeout变成了异步，按照上述代码的逻辑，应该是等f1完全执行完毕（包括setTimeout执行）后，判断是否执行f2，但真的如此吗？

测试代码如下：

_if(f1)._elseIf(f2)._else(f3).resolve();

执行代码的结果就是，什么也不输出。

Why？

因为JavaScript是单线程嘛。详情见（here）

那该怎么解决呢？

由于有异步代码，且必须在异步代码后处理后续的链，那么我们就等待异步代码执行完毕后，才执行后续的链嘛，如下：


function f1(name){
  setTimeout(function(){
    if(name === 'Monkey'){
      console.log('yes, I am Monkey');
    }else{
      //处理后续链
      this.resolve(name, 1);//1代表下一个需处理函数在数组中的位置
    }
  }.bind(this), 2000);
}

好了，由于在函数中，我们使用了this，其代表Slink对象，且改变了resolve方法，固，需细微调整Slink构造函数和原型链，如下：


function Slink(f){
  this.thens = [];
  this.thens.push(f.bind(this));
}
Slink.prototype = {
  _elseIf: function(f){
      if(typeof f === 'function'){
        this.thens.push(f.bind(this));
        return this;    
      }    
  },
  _else: function(f){
      return this._elseIf(f.bind(this));
  },
  resolve: function(name, flag){
      for(var i = flag, len = this.thens.length; i < len; i++){
        if(this.thens[i](name) !== 'next'){
          break;
        }
      }
      return this;      
  }
}

测试代码如下：


function f1(name){
  setTimeout(function(){
    if(name === 'Monkey'){
      console.log('yes, I am Monkey');
    }else{
      //处理后续链
      this.resolve(name, 1);//1代表下一个需处理函数在数组中的位置
    }
  }.bind(this), 2000);
}
function f2(name){
  if(name === 'Dorie'){
    console.log('yes, I am Dorie');
  }else{
    return 'next';
  }
}
function f3(){
  console.log('sorry, over for ending!');
}
_if(f1)._elseIf(f2)._else(f3).resolve('',0);

哈哈，如果你了解Promise，是不是感觉这么相似呢。

是的，宗旨都一样，达到异步代码扁平化目的，不过这里的代码比Promise要简约得多啦。关于Promise详情见(here)。

感谢阅读此文，希望能帮助到大家，谢谢大家对本站的支持！

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

JS使用Math.round实现保留两位小数的原理与代码

JavaScript 原生 Date 对象怎么实现日期加减

JavaScript函数定义的三种方式：声明、表达式与箭头函数

JavaScript中escape、encodeURI和encodeURIComponent对空格的处理差异

JavaScript自学路线图：从基础语法到ES6+核心特性

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JavaScript实现按钮点击冷却时间的完整代码示例