当前位置: 萬仟网 > IT编程>开发语言>JavaScript > JavaScript函数柯里化详解

JavaScript函数柯里化详解

2022年01月14日 JavaScript 我要评论
目录一、简单了解apply和call二、什么是函数柯里化?三、写一个公共的柯里化函数四、创建一个灵活的柯里化函数五、写一个可控制的执行时间的柯里化函数总结一、简单了解apply和callcall 和

一、简单了解apply和call

  • call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向。
  • call 和 apply二者的作用完全一样,只是接受参数的方式不太一样。call其实是apply的一种语法糖。
  • 格式:apply(context,[arguments]),call(context,param1,param2,...)

二、什么是函数柯里化?

柯里化(currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。

在这里举个例子,有一个add()函数,它是用来处理我们传给它的参数(param1,params2,…)相加求和的一个函数。

// 在这里第一个具有两个参数`x`、`y`的`add(x , y)`函数
function add(x , y){
	return x + y;
}
// 调用`add()`函数,并给定两个参数`4`和`6`
add(4,6);
// 模拟计算机操作,第一步 传入第一个参数 4
function add(4 , y){
	return 4 + y;
}
// 模拟计算机操作,第二步 传入第一个参数 6
function add(4 , 6){
	return 4 + 6;
}

如果我们将add()函数柯里化,是什么样子呢?在这里简单的实现一下:

// 柯里化过的add()函数,可以接受部分参数
function add(x ,y){
	if (typeof y === 'undefined') {
		return function (newy){
			return x + newy;
		}
	}
	// 完整应用
	return x + y;
}
// 测试调用
console.log(typeof add(4)); // [function]
console.log(add(4)(6)); // 10
// 可以创建保存函数
let saveadd = add(4);
console.log(saveadd(6)); // 10

从以上简单柯里化的add()函数可以看出,函数可以接受部分函数,然后返回一个新的函数,使其继续处理剩下的函数。

三、写一个公共的柯里化函数

在这里我们创建一个公共的柯里化函数,那样我们就不必每次写一个函数都要在其内部实现复杂的柯里化过程。

// 定义一个createcurry的函数
function createcurry(fn){
	var slice = array.prototype.slice,
	stored_args = slice.call(arguments,1);
	return function () {
		let new_args = slice.call(arguments),
		args = stored_args.concat(new_args);
		return fn.apply(null,args);
	}
}

在以上公共的柯里化函数中:

  • arguments,并不是一个真的数组,只是一个具有length属性的对象,所以我们从array.prototype中借用slice方法帮我们把arguments转为一个真正的数组,方便我们更好的操作。
  • 当我们第一次调用函数createcurry的时候,其中变量stored_args 是保持了除去第一个参数以外的参数,因为第一个参数是我们需要柯里化的函数。
  • 当我们执行createcurry函数中返回的函数时,变量new_args获取参数并转为数组。
  • 内部返回的函数通过闭包访问变量stored_args中存储的值和变量new_args的值合并为一个新的数组,并赋值给变量args
  • 最后调用fn.apply(null,args)方法,执行被柯里化的函数。

现在我们来测试公共的柯里化函数

// 普通函数add()
function add(x , y){
	return x + y;
}
// 柯里化得到一个新的函数
var newadd = createcurry(add,4);
console.log(newadd(6)); // 10

//另一种简便方式
console.log(createcurry(add,4)(6));// 10

当然这里并不局限于两个参数的柯里化,也可以多个参数:

// 多个参数的普通函数
function add(a,b,c,d){
	return a + b + c + d;
}
// 柯里化函数得到新函数,多个参数可以随意分割
console.log(createcurry(add,4,5)(5,6)); // 20
// 两步柯里化
let add_one = createcurry(add,5);
console.log(add_one(5,5,5));// 20
let add_two = createcurry(add_one,4,6);
console.log(add_two(6)); // 21

通过以上的例子,我们可以发现一个局限,那就是不管是两个参数还是多个参数,它只能分两步执行,如以下公式:

  • fn(x,y) ==> fn(x)(y);
  • fn(x,y,z,w) ==> fn(x)(y,z,w) || fn(x,y)(z,w)||…

如果我们想更灵活一点:

  • fn(x,y) ==> fn(x)(y);
  • fn(x,y,z) ==> fn(x,y)(z) || fn(x)(y)(z);
  • fn(x,y,z,w) ==> fn(x,y)(z)(w) || fn(x)(y)(z)(w) || …;

我们该怎么实现呢?

四、创建一个灵活的柯里化函数

经过以上练习,我们发现我们创建的柯里化函数存在一定局限性,我们希望函数可以分为多步执行:

// 创建一个可以多步执行的柯里化函数,当参数满足数量时就去执行它:
// 函数公式:fn(x,y,z,w) ==> fn(x)(y)(z)(w);
let createcurry = (fn,...params)=> {
	let args = parsms || [];
	let fnlen = fn.length; // 指定柯里化函数的参数长度
	return (...res)=> {
		// 通过作用域链获取上一次的所有参数
		let allargs = args.slice(0);
		// 深度拷贝闭包共用的args参数,避免后续操作影响(引用类型)
		allargs.push(...res);
		if(allargs.length < fnlen){
		   // 当参数数量小于原函数的参数长度时,递归调用createcurry函数
		   return createcurry.call(this,fn,...allargs);
		}else{
		  // 当参数数量满足时,触发函数执行
		  return fn.apply(this,allargs);
		}
	}
}

// 多个参数的普通函数
function add(a,b,c,d){
	return a + b + c + d;
}
// 测试柯里化函数
let curryadd = createcurry(add,1);
console.log(curryadd(2)(3)(4)); // 10

以上我们已经实现了灵活的柯里化函数,但是这里我们又发现了一个问题:

  • 如果我第一次就把参数全部传入,但是它并没有返回结果,而是一个函数(function)。
  • 只有我们再次将返回的函数调用一次才能返回结果:curryadd(add,1,2,3,4)();
  • 可能有人说如果是全部传参,就调用原来的add()函数就行了,这也是一种办法;但是我们在这里既然是满足参数数量,对于这种情况我们还是处理一下。

在这里我们只需要在返回函数前做一下判断就行了:

let createcurry = (fn,...params)=> {
	let args = parsms || [];
	let fnlen = fn.length; // 指定柯里化函数的参数长度
	if(length === _args.length){
	   // 加入判断,如果第一次参数数量以经足够时就直接调用函数获取结果
           return fn.apply(this,args);
        }
	return (...res)=> {
		let allargs = args.slice(0);
		allargs.push(...res);
		if(allargs.length < fnlen){
		   return createcurry.call(this,fn,...allargs);
		}else{
		  return fn.apply(this,allargs);
		}
	}
}

以上可以算是完成了一个灵活的柯里化的函数了,但是这里还不算很灵活,因为我们不能控制它什么时候执行,只要参数数量足够它就自动执行。我们希望实现一个可以控制它执行的时机该怎么办呢?

五、写一个可控制的执行时间的柯里化函数

我们这里直接说明一下函数公式:

  • fn(a,b,c) ==> fn(a)(b)(c )();
  • fn(a,b,c) ==> fn(a);fn(b);fn(c );fn();
  • 当我们参数足够时它并不会执行,只有我们再次调用一次函数它才会执行并返回结果。在这里我们在以上例子中加一个小小的条件就可以实现。
// 当参数满足,再次执行时调用函数
let createcurry = (fn,...params)=> {
	let args = parsms || [];
	let fnlen = fn.length; // 指定柯里化函数的参数长度
	//当然这里的判断需要注释掉,不然当它第一次参数数量足够时就直接执行结果了
	//if(length === _args.length){
	   // 加入判断,如果第一次参数数量以经足够时就直接调用函数获取结果
           //return fn.apply(this,args);
        //}
	return (...res)=> {
		let allargs = args.slice(0);
		allargs.push(...res);
		// 在这里判断输入的参数是否大于0,如果大于0在判断参数数量是否足够,
		// 这里不能用 && ,如果用&& 也是参数数量足够时就执行结果了。
		if(res.length > 0 || allargs.length < fnlen){
		   return createcurry.call(this,fn,...allargs);
		}else{
		  return fn.apply(this,allargs);
		}
	}
}

// 多个参数的普通函数
function add(a,b,c,d){
	return a + b + c + d;
}
// 测试可控制的柯里化函数
let curryadd = createcurry(add,1);
console.log(curryadd(2)(3)(4)); // function
console.log(curryadd(2)(3)(4)()); // 10
console.log(curryadd(2)(3)()); // 当参数不足够时返回 nan

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注萬仟网的更多内容!

(0)
打赏 微信扫一扫 微信扫一扫

相关文章:

  • 微信抖币充值入口(充值抖币便宜的方法)

    微信抖币充值入口(充值抖币便宜的方法)

    抖音可以说是时下最热门的短视频平台了,帅哥美女众多,是最受海外华人欢迎的app之一,抖音直播功能也非常受欢迎,那么海外华人如果想充值抖音币该如何操作呢?最常见的... [阅读全文]
  • Java Spring框架的概述

    目录spring框架概述ioc容器ioc概念和原理什么是iocioc底层原理ioc接口ioc操作bean管理ioc操作bean管理(xml)基于xml方式创建队形基于xml方式注入…

    2022年01月14日 开发语言
  • Flutter实现仿微信分享功能的示例代码

    Flutter实现仿微信分享功能的示例代码

    目录1.首先去pub官网2 在微信开放平台注册开发者账号以及创建你的应用程序3 在分享页面3.1 初始化3.2 检测微信是否安装3.3 分享微信消息总结本文设计... [阅读全文]
  • Android中的xml解析介绍

    Android中的xml解析介绍

    目录xml - 元素xml - 解析例子总结xml 代表可扩展标记语言。xml 是一种非常流行的格式,通常用于在 internet 上共享数据。本章说明如何解析... [阅读全文]
  • Python 统计Jira的bug 并发送邮件功能

    Python 统计Jira的bug 并发送邮件功能

    1.首先在pycharm上使用pip安装 pip install html-table pip install jira 2.初始化发件人邮箱,账号,密码# 发... [阅读全文]

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2022  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com