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

JavaScript 常见函数模式与实现场景详解

作者：代码拾荒

时间：2026-10-31

浏览：402

本文系统梳理了 JavaScript 中常见的函数模式，包括节流、柯里化、记忆化、高阶函数、单例、偏函数、IIFE、工厂函数、递归、管道、尾调用优化、生成器、异步函数、中间件、动态函数、链式调用、观察者、策略及代理模式。详细解析各模式的作用、实现逻辑及典型应用场景，帮助开发者提升代码质量与性能。

文章目录

在 JavaScript 开发中，除了惰性求值与防抖机制外，还存在多种高效的函数模式与功能组件。以下列举了常用的函数类型及其具体用途。

1. 节流函数 (Throttle)

核心作用：限制函数的执行频率，确保在设定的时间间隔内仅执行一次，即便触发事件非常频繁。

具体实现方式如下。

function throttle(func, delay) {
    let lastTime = 0;
    return function (...args) {
        const now = Date.now();
        if (now - lastTime >= delay) {
            lastTime = now;
            func.apply(this, args);
        }
    };
}

典型应用场景：

  • 滚动事件监听 (scroll)
  • 浏览器窗口大小调整 (resize)

2. 柯里化函数 (Currying)

核心作用：将接收多个参数的单一函数，转换为一系列仅接收单个参数的函数链。

具体实现方式如下。

function curry(func) {
    return function curried(...args) {
        if (args.length >= func.length) {
            return func.apply(this, args);
        } else {
            return function (...nextArgs) {
                return curried.apply(this, args.concat(nextArgs));
            };
        }
    };
}
// 示例
function add(a, b, c) {
    return a + b + c;
}
const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // 6

典型应用场景：

  • 实现参数复用
  • 提升代码可读性

3. 记忆化函数 (Memoization)

核心作用：缓存函数的计算结果，避免重复计算，从而显著提升程序性能。

具体实现方式如下。

function memoize(func) {
    const cache = new Map();
    return function (...args) {
        const key = JSON.stringify(args);
        if (cache.has(key)) {
            return cache.get(key);
        }
        const result = func.apply(this, args);
        cache.set(key, result);
        return result;
    };
}
// 示例
function slowFunction(num) {
    console.log("Calculating...");
    return num * 2;
}
const memoizedFunction = memoize(slowFunction);
console.log(memoizedFunction(5)); // Calculating... 10
console.log(memoizedFunction(5)); // 10 (从缓存中获取)

典型应用场景：

  • 动态规划算法
  • 递归计算场景（例如斐波那契数列）

4. 高阶函数 (Higher-Order Functions)

核心作用：接收其他函数作为参数，或者返回一个新的函数。

具体示例如下。

function higherOrderFunction(callback) {
    return function (...args) {
        console.log("Before callback");
        const result = callback(...args);
        console.log("After callback");
        return result;
    };
}
// 示例
const wrappedFunction = higherOrderFunction((x, y) => x + y);
console.log(wrappedFunction(3, 4));

典型应用场景：

  • 函数式编程范式
  • 中间件架构设计

5. 单例模式函数 (Singleton)

核心作用：确保某个类或函数在整个程序生命周期中仅被实例化一次。

具体实现方式如下。

function Singleton() {
    let instance;
    return function () {
        if (!instance) {
            instance = { name: "Singleton Instance" };
        }
        return instance;
    };
}
const getInstance = Singleton();
console.log(getInstance() === getInstance()); // true

典型应用场景：

  • 全局状态管理
  • 系统配置管理

6. 偏函数 (Partial Function)

核心作用：固定函数的一部分参数，并返回一个包含剩余参数逻辑的新函数。

具体实现方式如下。

function partial(func, ...fixedArgs) {
    return function (...remainingArgs) {
        return func.apply(this, [...fixedArgs, ...remainingArgs]);
    };
}
// 示例
function multiply(a, b, c) {
    return a * b * c;
}
const partialMultiply = partial(multiply, 2);
console.log(partialMultiply(3, 4)); // 24

典型应用场景：

  • 预设固定参数
  • 简化后续函数调用

7. 自执行函数 (IIFE)

核心作用：定义完成后立即执行，有效避免变量污染全局作用域。

具体示例如下。

(function () {
    const a = 10;
    console.log("IIFE executed:", a);
})();

典型应用场景：

  • 模块化开发模式
  • 立即初始化代码逻辑

8. 工厂函数 (Factory Function)

核心作用：动态创建对象或生成函数实例。

具体示例如下。

function createPerson(name, age) {
    return {
        name,
        age,
        greet() {
            console.log(`Hi, my name is ${name}`);
        }
    };
}
const person = createPerson("Alice", 25);
person.greet();

典型应用场景：

  • 动态对象创建
  • 替代传统类构造函数

9. 递归函数

核心作用：函数内部调用自身，主要用于解决分治问题或处理重复性任务。

具体示例如下。

function factorial(n) {
    if (n === 1) return 1;
    return n * factorial(n - 1);
}
console.log(factorial(5)); // 120

典型应用场景：

树结构遍历递归算法（例如归并排序）

10. 管道函数 (Pipeline Function)

核心作用：将多个函数按顺序组合执行，数据像通过管道一样依次处理。

具体实现方式如下。

function pipe(...funcs) {
    return function (value) {
        return funcs.reduce((acc, func) => func(acc), value);
    };
}
// 示例
const add = (x) => x + 2;
const multiply = (x) => x * 3;
const pipedFunction = pipe(add, multiply);
console.log(pipedFunction(5)); // 21

典型应用场景：

  • 函数式编程范式
  • 数据流处理流程

11. 递归尾调用优化函数 (Tail Call Optimization)

核心作用：在递归函数中，若最后一步操作为函数调用，则进行优化以减少栈内存占用。

具体示例如下。

function factorial(n, total = 1) {
    if (n === 1) return total;
    return factorial(n - 1, n * total); // 尾调用
}
console.log(factorial(5)); // 120

典型应用场景：

  • 深度递归场景（例如处理复杂树形结构）

12. 偏应用函数 (Arity Reduction)

核心作用：降低函数参数的复杂性，通过固定部分参数来返回一个新函数。

具体示例如下。

function partialRight(func, ...fixedArgs) {
    return function (...args) {
        return func(...args, ...fixedArgs);
    };
}
// 示例
function greet(greeting, name) {
    return `${greeting}, ${name}`;
}
const sayHelloTo = partialRight(greet, "Hello");
console.log(sayHelloTo("Alice")); // "Hello, Alice"

13. 生成器函数 (Generator Function)

核心作用：用于生成一系列值，每次调用时返回一个新值，非常适合处理流式数据。

具体示例如下。

function* generatorFunction() {
    yield 1;
    yield 2;
    yield 3;
}
const gen = generatorFunction();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

典型应用场景：

  • 异步流处理
  • 数据生成器

14. 异步函数 (Async Function)

核心作用：通过 async 和 await 关键字处理异步操作，有效简化回调地狱问题。

具体示例如下。

async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
}
fetchData();

典型应用场景：

  • 异步操作处理（例如网络请求、文件读取）

15. 中间件函数 (Middleware Function)

核心作用：按顺序执行一系列函数，支持动态添加功能逻辑。

具体示例如下。

function middlewarePipeline(context, middlewares) {
    const executeMiddleware = (index) => {
        if (index < middlewares.length) {
            middlewares[index](context, () => executeMiddleware(index + 1));
        }
    };
    executeMiddleware(0);
}
// 示例
const middlewares = [
    (ctx, next) => { console.log('Middleware 1'); next(); },
    (ctx, next) => { console.log('Middleware 2'); next(); },
    (ctx, next) => { console.log('Middleware 3'); }
];
middlewarePipeline({}, middlewares);
// 输出:
// Middleware 1
// Middleware 2
// Middleware 3

典型应用场景：

  • Web 框架（例如 Express、Koa）

16. 动态函数 (Dynamic Function)

核心作用：使用 new Function 动态创建函数对象。

具体示例如下。

const dynamicFunc = new Function('a', 'b', 'return a + b');
console.log(dynamicFunc(2, 3)); // 5

典型应用场景：

  • 动态代码生成
  • 模板引擎处理

17. 链式调用函数 (Chaining)

核心作用：返回 this，允许进行多次连续调用。

具体示例如下。

class Chain {
    constructor(value) {
        this.value = value;
    }
    add(num) {
        this.value += num;
        return this;
    }
    multiply(num) {
        this.value *= num;
        return this;
    }
    print() {
        console.log(this.value);
        return this;
    }
}
const chain = new Chain(1);
chain.add(2).multiply(3).print(); // 9

典型应用场景：

  • API 设计（例如 jQuery）

18. 观察者模式函数 (Observer)

核心作用：用于监听对象状态的变化，并在变化时执行相应的回调函数。

具体示例如下。

class Observable {
    constructor() {
        this.subscribers = [];
    }
    subscribe(callback) {
        this.subscribers.push(callback);
    }
    notify(data) {
        this.subscribers.forEach(callback => callback(data));
    }
}
// 示例
const observable = new Observable();
observable.subscribe(data => console.log('Subscriber 1:', data));
observable.subscribe(data => console.log('Subscriber 2:', data));
observable.notify('Hello, Observers!');
// 输出:
// Subscriber 1: Hello, Observers!
// Subscriber 2: Hello, Observers!

典型应用场景：

  • 状态管理（例如 Redux、Vuex）

19. 策略模式函数 (Strategy)

核心作用：根据不同的策略执行不同的逻辑分支。

具体示例如下。

const strategies = {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b,
    multiply: (a, b) => a * b
};
function executeStrategy(strategy, a, b) {
    return strategies[strategy](a, b);
}
console.log(executeStrategy('add', 3, 2)); // 5
console.log(executeStrategy('multiply', 3, 2)); // 6

典型应用场景：

  • 动态行为切换
  • 复杂逻辑分离

20. 代理模式函数 (Proxy)

核心作用：使用 Proxy 拦截对象的操作，并添加额外的逻辑处理。

具体示例如下。

const handler = {
    get(target, property) {
        console.log(`Getting ${property}`);
        return target[property];
    },
    set(target, property, value) {
        console.log(`Setting ${property} to ${value}`);
        target[property] = value;
    }
};
const obj = new Proxy({}, handler);
obj.a = 10; // Setting a to 10
console.log(obj.a); // Getting a -> 10

典型应用场景：

  • 数据绑定机制
  • 权限控制逻辑

以上介绍了 JavaScript 中常见的函数类型及其用途。如需了解更多关于 js 常见函数类型的内容，请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
作者最新文章

JavaScript入门书籍避坑：这些书不适合初学者

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

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

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

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

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