小李科技的博客-文档站

主题

Part 2 · 模块二：ES 新特性与 TypeScript（JavaScript 函数式编程与进阶应用） ​

概述 ​

本模块聚焦 JavaScript 的函数式编程思想与进阶应用，从函数基础、高阶函数，到 folktale 函数式库、手动实现 bind、链式调用的原理与实现，并结合闭包、性能优化回顾等进阶主题，帮助你建立函数式编程思维并掌握底层机制。

主要内容 ​

  • 函数基础与高阶函数
  • folktale 函数式编程库
  • 手动实现 bind 方法
  • 链式调用与隐式链式调用
  • 链式调用的底层原理
  • 性能优化知识回顾
  • 闭包原理与应用
  • 补充知识点与总结

目录 ​

  1. 函数
  2. folktale
  3. mybind
  4. chain
  5. 隐式链式调用
  6. chain 的原理
  7. 性能优化回顾
  8. 闭包
  9. 其他

1. 函数（函数基础与高阶函数） ​

函数是 JavaScript 的一等公民（first-class citizen），可作为值被传递、返回、赋值。

  • 函数声明 / 表达式 / 箭头函数 的区别与 this 绑定差异。
  • 高阶函数（Higher-Order Function）：接收函数作为参数或返回函数的函数。
javascript
// 高阶函数：接收回调
function map(arr, fn) {
  const result = []
  for (const item of arr) result.push(fn(item))
  return result
}

const doubled = map([1, 2, 3], x => x * 2)   // [2, 4, 6]

函数式编程的核心即通过高阶函数组合逻辑，避免共享可变状态。

2. folktale ​

folktale 是一个函数式编程库，提供了 Maybe、Either、Task 等数据类型，强调纯函数与不可变。

javascript
const { Maybe } = require('folktale/maybe')

const result = Maybe.fromNullable(findUser(1))
  .map(u => u.name)
  .getOrElse('默认值')
  • Maybe 安全处理 null / undefined，避免层层判空。
  • Either 表达成功/失败两种分支。
  • Task 用于描述异步副作用，类似 Promise 但更函数式。

3. mybind（手动实现 bind 方法） ​

Function.prototype.bind 返回一个新函数，并永久绑定 this 与部分参数。手动实现：

javascript
function myBind(fn, context, ...presetArgs) {
  return function (...args) {
    return fn.apply(context, [...presetArgs, ...args])
  }
}

const obj = { x: 10 }
function add(y) { return this.x + y }
const boundAdd = myBind(add, obj, 5)
boundAdd()   // 15

进阶还应支持 new 调用时忽略绑定的 this（即判断 this instanceof）。

4. chain（链式调用基础） ​

链式调用指方法返回对象自身（或同类型实例），从而连续调用：

javascript
class Calculator {
  constructor(value = 0) { this.value = value }
  add(n) { this.value += n; return this }
  mul(n) { this.value *= n; return this }
}

new Calculator(1).add(2).mul(3).value   // 9

核心是每个方法末尾 return this，使调用可以"接力"。

5. 隐式链式调用（隐式链式调用的实现） ​

隐式链式调用不显式返回对象，而是惰性记录操作，在需要时统一求值（如 lodash 的 _() 包装）。

javascript
function _(value) {
  const wrappers = []
  const chain = {
    double() { wrappers.push(v => v * 2); return chain },
    add(n)   { wrappers.push(v => v + n); return chain },
    value()  { return wrappers.reduce((acc, fn) => fn(acc), value) }
  }
  return chain
}

_(3).double().add(1).value()   // 7

操作被暂存，直到 .value() 才真正执行，便于组合与优化执行顺序。

6. chain 的原理（链式调用的底层原理剖析） ​

  • 返回自身 / 新实例：是链式可读写的基础。
  • 惰性求值：隐式链将操作缓存为函数队列，避免中间状态。
  • this 上下文：方法内通过 this 访问同一实例状态。
  • 终止方法：如 .value() / .then() 触发真正计算，区分"构建阶段"与"执行阶段"。

理解原理有助于在自定义 DSL、查询构造器、流式处理中正确设计 API。

7. 性能优化回顾 ​

结合本系列性能优化模块，回顾与本模块相关的要点：

  • 避免在高频回调（如链式 map/filter）中创建过多临时对象与闭包。
  • 善用惰性执行减少无效计算。
  • 函数式写法可读性好，但需注意短生命周期对象带来的 GC 压力（参见性能优化文档）。

8. 闭包（闭包原理与应用） ​

闭包是函数与其词法作用域的组合，使函数可访问定义时所在的变量，即使外部已执行完毕。

javascript
function createCounter() {
  let count = 0
  return () => ++count
}

const counter = createCounter()
counter()   // 1
counter()   // 2

应用在：数据私有化、函数工厂、防抖/节流、模块封装。注意闭包会延长变量生命周期，滥用可能导致内存占用偏高。

9. 其他（补充知识点与总结） ​

  • 函数式 vs 命令式编程范式对比。
  • 纯函数、副作用、不可变数据的意义。
  • 组合（compose）、管道（pipe）等函数式工具。
  • 本模块整体回顾：从函数基础到高阶、链式与闭包，建立可复用、可测试的函数式思维。

本模块以"函数"为主线，串联高阶函数、函数式库、链式调用、闭包等进阶主题，是掌握现代 JavaScript 工程化的重要一环。

Copyright © 2025 - 2026 dL-hx