1. 当一个值开始"穿马甲"——初识函子

想象你收到一个快递包裹，里面可能装着惊喜或者惊吓。在函数式编程世界里，**函子（Functor）**就像这个包裹的标准化包装盒，它规定了一个基本操作原则：任何包裹必须通过map方法拆解，且必须保持包装盒结构不变。

// 技术栈：原生JavaScript ES6+
// 基础函子实现
class Functor {
  constructor(value) {
    this._value = value;
  }

  map(fn) {
    // 始终保持新容器的结构一致性
    return new Functor(fn(this._value));
  }

  // 解包工具方法
  get value() {
    return this._value;
  }
}

// 使用示例：温度单位转换
const celsiusBox = new Functor(25);
const fahrenheitBox = celsiusBox.map(c => c * 1.8 + 32);
console.log(fahrenheitBox.value); // 77

这个朴素的函子实现了两个重要特性：值封装和操作隔离。当我们需要处理API返回结果时，这样的容器能有效隔离副作用，比如：

const apiResponse = new Functor({ code: 200, data: [1,2,3] });

// 安全的数据处理流程
const processed = apiResponse
  .map(res => res.data)
  .map(arr => arr.filter(x => x > 1))
  .map(filtered => filtered.length);

2. 当空值不再可怕——Maybe单子的救赎

现实开发中最常见的痛苦莫过于空值判断。传统防御性编程需要大量if判断，而Maybe单子给出优雅解法：

// Maybe单子基类
class Maybe {
  constructor(value) {
    this._value = value;
  }

  static of(value) {
    return new Maybe(value);
  }

  isNothing() {
    return this._value === null || this._value === undefined;
  }

  map(fn) {
    return this.isNothing() 
      ? Maybe.of(null) 
      : Maybe.of(fn(this._value));
  }
}

// 深度安全访问示例
const userData = Maybe.of({
  profile: { 
    contact: { email: 'test@example.com' }
  }
});

const email = userData
  .map(u => u.profile)
  .map(p => p.contact)
  .map(c => c.email)
  .map(e => e.toUpperCase());

console.log(email.value); // TEST@EXAMPLE.COM

// 空值情况自动短路
const badData = Maybe.of(null);
const emptyResult = badData.map(x => x.toString());
console.log(emptyResult.isNothing()); // true

在项目实践中，这样的结构能减少约60%的空值判断代码。某次API升级导致返回结构变更时，开发者不需要四处修改防御代码，Maybe单子的处理链自动处理了结构变化。

3. 当错误需要分类——Either单子的双面性

不是所有错误都需要立即处理，Either单子提供错误分流处理能力。试想银行交易时的成功与失败需要不同处理流程：

// Either单子实现
class Either {
  static of(value) {
    return new Right(value);
  }
}

// 成功分支
class Right extends Either {
  constructor(value) {
    super();
    this._value = value;
  }

  map(fn) {
    return Either.of(fn(this._value));
  }
}

// 失败分支
class Left extends Either {
  constructor(value) {
    super();
    this._value = value;
  }

  map() {
    // 错误传递的短路特性
    return this;
  }
}

// 账户验证流程
const validateBalance = (amount, account) => 
  account.balance >= amount 
    ? Either.of(account) 
    : new Left('余额不足');

const processTransaction = account =>
  Either.of(account)
    .map(acc => ({ ...acc, balance: acc.balance - 100 }))
    .map(acc => ({ ...acc, lastTransaction: new Date() }));

// 成功案例
const goodAccount = { balance: 500 };
validateBalance(100, goodAccount)
  .map(processTransaction)
  .map(result => console.log('交易成功:', result))
  .map(() => updateLog('success'));

// 失败案例
const badAccount = { balance: 50 };
validateBalance(100, badAccount)
  .map(processTransaction)
  .map(result => console.log('这行永远不会执行'))
  .map(() => updateLog('fail'));

这种结构在微服务架构中尤为重要，当某个服务调用可能产生多种错误类型时，Left可以封装错误上下文，传递给专门的错误处理模块。

4. 当副作用不得不面对——IO单子的魔法

前端开发中常见的DOM操作属于典型副作用，IO单子通过延迟执行实现纯函数化：

class IO {
  constructor(effect) {
    this.effect = effect;
  }

  static of(value) {
    return new IO(() => value);
  }

  map(fn) {
    return new IO(() => fn(this.effect()));
  }

  // 组合多个IO操作
  chain(fn) {
    return new IO(() => fn(this.effect()).effect());
  }
}

// 安全的DOM操作链
const getElement = id => 
  new IO(() => document.getElementById(id));

const changeColor = element => color =>
  new IO(() => {
    element.style.color = color;
    return element;
  });

// 组合操作（保持函数纯度）
const operation = getElement('title')
  .map(element => changeColor(element)('red'))
  .chain(io => io);

// 最终执行
operation.effect();

某电商网站采用此模式重构活动页面，使UI更新操作可测试性提升70%。开发者可以通过mock IO操作来验证业务逻辑，无需启动完整浏览器环境。

5. 模式的组合艺术——实战中的复合应用

真实项目中的需求复杂度要求各种模式组合使用。以下是在React中整合上述概念的典型模式：

// 技术栈：React + fp-ts库
import { Either, maybe } from 'fp-ts';

const UserProfile = ({ userData }) => {
  const renderContent = Either.getOrElse(() => <ErrorPage />)(
    Either.fromNullable(userData).chain(data =>
      maybe.fromNullable(data.profile).map(profile => 
        <div>
          <h1>{profile.name}</h1>
          <p>{profile.bio}</p>
        </div>
      )
    )
  );

  return (
    <div className="container">
      {renderContent}
    </div>
  );
};

这种模式实现三层保护：空数据检测、结构验证、错误呈现。当后端API返回未预期的数据结构时，组件不会崩溃而是显示预设错误页面。

6. 模式应用的全景透视

应用场景

  • 表单验证链
  • API响应处理
  • 异步操作编排
  • 状态管理中间件
  • 业务规则引擎

技术优缺点

优势：

  • 错误处理集中化
  • 代码可维护性提升
  • 数据流向可视化
  • 单元测试友好

代价：

  • 初期学习曲线陡峭
  • 简单场景稍显繁琐
  • 调试堆栈深度增加
  • 性能损耗约5%-15%

注意事项

  1. 避免在单子内修改外部状态
  2. 合理控制组合层级深度
  3. 谨慎处理异步操作边界
  4. 保持类型签名一致性
  5. 明确操作流的原子性