JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法

简介: JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法

柯里化的实现原理:

接下来我们就自己手动实现柯里化。


1.目标:编写一个myCurring的函数,参数接收一个函数,调用自动实现柯里化。

2.思路步骤:

创建一个名字为myCurring的函数,接受的参数为 那个需要变为柯里化的函数,这里用fn 表示

函数内部返回一个名字为 curried 的函数,接收参数的个数为 fn 中参数的个数,这里使用剩余参数 ...args 接收

curried 函数内部 需要去判断当前已经接收的参数的个数,是否与参数本身需要接受的参数的个数一致了。

如果当前传入的参数 大于等于 需要接受的参数的个数时,执行函数,返回fn.apply(this, args)

如果不满足上述条件 ,也就是传入的参数没有达到要求的个数时,需要返回一个新函数 这里用curried2表示,接收的参数为第一次接收的参数后剩下的参数,这里使用...arg2 表示。

接收到参数后 curried2 函数执行,递归调用curried 函数,继续判断传入的参数的个数是否一致,一致则执行3.1的步骤,反之则继续递归调用 curried函数检查参数的一致性。

调用myCurring 函数,传入我们需要 柯里化的函数作为参数。

3.完整代码示例:

// 柯里化函数的实现  将 myCurrying 函数实现为自动柯里化函数
function myCurrying (fn) {
    return function curried (...args) {
        // 判断当前已经接收的参数的个数,是否与参数本身需要接受的参数的个数一致了
        // 1. 当前传入的参数 大于等于 需要接受的参数的个数时,执行函数
        if (args.length >= fn.length) {
            return fn.apply(this, args)
        } else {
            // 2.当前传入的参数,没有达到个数时,需要返回一个新的函数,继续来接收剩余的参数
            function curried2 (...args2) {
                // 接收到参数后,需要递归调用curried 来再一次检查函数参数的个数是否达标
                return curried.apply(this, args.concat(args2)) // concat方法用于拼接两个数组返回一个新数组
            }
            return curried2
        }
    }
}

4.检验代码的正确性,使用 myCurring 自动实现函数的柯里化

先看代码:

//  使用我们已经实现的柯里化的函数myCurring将sum函数进行柯里化转化
function sum (num1, num2, num3) {
    return num1 + num2 + num3
}
var result1 = sum(1, 2, 3)
console.log(result1) // 6
var result2 = myCurrying(sum) // sum函数作为参数传入 myCurrying 函数中
console.log(result2(1, 2, 3)) // 6

如上所示,result1 和 result2 输出的结果都是6,证明我们实现了sum函数的柯里化。

目录
相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
28天前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
123 52
|
1月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
1月前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
1月前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
42 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
42 5
|
28天前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
68 1
|
1月前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
|
1月前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
26 1