JavaScript高阶函数详解：回调、一等公民与函数柯里化实战

高阶函数是指接收另一个函数作为参数，或者返回一个函数的函数。

JavaScript原生支持高阶函数，结合其其他特性，使其成为非常适合进行函数式编程的语言之一。

JavaScript将函数视为一等公民

常有人提到JavaScript中的函数是一等公民，这意味着在JavaScript中，函数本质上就是对象。

它们的类型是Object，可以赋值给变量，并能像其他引用变量一样被传递和返回。

这种一等函数的特性赋予了JavaScript特殊能力，使我们能够充分利用高阶函数带来的优势。

由于函数被视为对象，且JavaScript是广泛使用的编程语言，因此它原生支持函数式编程的方法。

事实上，一等函数是JavaScript的原生特性。你可能在使用它们时并未意识到自己正在使用函数式编程的概念。

高阶函数接收函数作为参数

如果你从事过JavaScript开发，很可能接触过回调函数的使用场景。

回调函数是在其他操作完成后执行的函数。

通常，我们将该函数作为最后一个参数传递，置于其他参数之后，且常定义为内联匿名函数。回调函数的实现依赖于JavaScript处理高阶函数的能力。

JavaScript是单线程语言，这意味着同一时间只能执行一个操作。

为避免操作或系统主线程相互阻塞（从而导致死锁），引擎确保所有操作按顺序执行。它们沿着单线程排队，直到安全地产生另一个代码事务。

将函数作为参数传入，并在父函数的其他操作完成后运行该函数的能力，对于支持高阶函数的语言至关重要。

JavaScript中的回调函数允许异步行为，因此脚本可以在等待结果的同时继续执行其他函数或操作。

在处理可能在不确定时间段后返回结果的资源时，传递回调函数的能力至关重要。

这种高阶函数模式在网络开发中非常有用。脚本可以向服务器发送请求，并在响应到达时进行处理，而无需了解服务器的网络延迟或处理时间。

Node.js经常使用回调函数来有效利用服务器资源。这种异步方法对于等待用户输入后再执行函数的应用程序也很有用。

考虑以下简单的JavaScript片段，它为一个按钮添加了一个事件监听器。

document.getElementById("clicker").addEventListener("click", function() {
alert("you triggered " + this.id);
});

这段脚本使用内联匿名函数来显示一个alert。

但它也可以很容易地使用一个单独定义的函数，并将这个命名函数传递给addEventListener方法。

var proveIt = function() {
alert("you triggered " + this.id);
};

document.getElementById("clicker").addEventListener("click", proveIt);

我们这样做不仅仅是展示了高阶函数。我们使代码更可读，更有弹性，并为不同的任务分离了功能（监听点击事件与提醒用户）。

代码可重用性

我们的proveIt()函数在结构上独立于它周围的代码，总是返回被触发的元素的id。这种函数设计的方法是函数式编程的核心。

这段代码可以存在于任何你用元素的id显示alert的上下文中，并且可以被任何事件监听器调用。

用一个单独定义和命名的函数取代内联函数的能力为我们提供了无限可能。

在函数式编程中，我们试图开发不改变外部数据的纯函数，并且每次对相同的输入返回相同的结果。

现在我们有了一个基本的工具，可以帮助我们开发一个小型的、有针对性的高阶函数库，你可以在任何应用程序中使用。

请注意，我们把 proveIt 而不是 proveIt() 传递给我们的 addEventListener 函数。

当你不带括号传递一个函数的名字时，你传递的是函数对象本身。
当你用圆括号传递函数时，你是在传递执行该函数的结果。

返回函数

除了将函数作为参数之外，JavaScript还允许函数将其他函数作为结果返回。

这是说得通的，因为函数是简单的对象。对象（包括函数）可以被定义为一个函数的返回值，就像字符串、数组或其他值。

但是函数作为结果返回是什么意思呢？

函数是分解问题和创建可重用代码片段的一种强大方式。当我们将一个函数定义为一个高阶函数的返回值时，它可以作为新函数的模板。

假如你读了太多关于"千禧一代"的文章，感到厌烦。你决定每当出现"千禧一代"这个词时，你都要用 "蛇人"这个短语来代替它。

你可能是简单地写一个函数，在你传递给它的任何文本上执行该文本替换。

var snakify = function(text) {
return text.replace(/millenials/ig, "Snake People");
};
console.log(snakify("The Millenials are always up to something."));
// The Snake People are always up to something.

这种写法是有效的，但不够通用。你可能想为其他情况写一个替换函数：

var hippify = function(text) {
return text.replace(/baby boomers/ig, "Aging Hippies");
};
console.log(hippify("The Baby Boomers just look the other way."));
// The Aging Hippies just look the other way.

但是，如果你决定要做一些更复杂的事情来保留原始字符串中的大小写呢？你将不得不修改你的两个新函数来做到这一点。

这很麻烦，而且会使你的代码更加脆弱，也更难阅读。在这样的情况下，我们可以使用高阶函数作为解决方案。

高阶函数模板

你真正想要的是能够在模板函数中用任何其他术语替换任何术语的灵活性，并将该行为定义为一个基础函数，你可以在此基础上建立新的自定义函数。

有了将函数指定为返回值的能力，JavaScript提供了让这种情况更便捷的方法：

var attitude = function(original, replacement, source) {
	return function(source) {
		return source.replace(original, replacement);
	};
};

var snakify = attitude(/millenials/ig, "Snake People");
var hippify = attitude(/baby boomers/ig, "Aging Hippies");

console.log(snakify("The Millenials are always up to something."));
// The Snake People are always up to something.
console.log(hippify("The Baby Boomers just look the other way."));
	// The Aging Hippies just look the other way.

我们所做的是把做实际工作的代码隔离到一个通用的、可扩展的attitude函数中。它封装了所有需要修改任何输入字符串的工作：使用原始短语作为初始值，并输出一个具有某种态度的替换短语。

当我们将这个新函数定义为对attitude高阶函数的引用，并预先填入它所接收的前两个参数时，我们会得到什么？它允许新函数接收你传递给它的任何文本，并在我们定义的返回函数中使用该参数作为attitude函数的输出。

JavaScript函数不关心传递给它们的参数的数量。

如果缺少第二个参数，函数将把它视为undefined。当我们选择不提供第三个参数，或任何数量的额外参数时，它也会这样做。

此外，你可以在以后再传入那个额外的参数。你可以在定义了你想调用的高阶函数后这样做，就像刚才演示的那样。

我们正在创建一个模板高阶函数来返回另一个函数。然后，我们把这个新返回的函数，除去一个属性，定义为模板函数的一个自定义实现。

你以这种方式创建的所有函数将继承高阶函数的工作代码。然而，你可以用不同的默认参数预先定义它们。

正在使用高阶函数

高阶函数对于JavaScript的工作方式来说是起码的，你已经在使用它们了。

每当你传递一个匿名函数或回调函数时，你实际上是把所传递的函数返回的值，作为另一个函数的参数（如箭头函数）使用。

开发人员在学习JavaScript的早期就熟悉高阶函数。它是JavaScript设计中固有的，所以以后才需要学习驱动箭头函数或回调的概念。

为返回其他函数的函数赋值的能力扩展了JavaScript的便利性。高阶函数允许我们创建自定义命名的函数，用一阶函数的共享模板代码执行专门的任务。

这些函数中的每一个都可以继承高阶函数中的任何改进。这可以协助我们避免代码重复，并保持我们的源代码的整洁和可读性。

如果你确保你的函数是纯净的（它们不改变外部值，并且对于任何给定的输入总是返回相同的值），你可以创建测试来验证当你更新一阶函数时，你的代码变化不会破坏任何东西。

总结

现在你知道了高阶函数的工作原理，你可以开始考虑如何在自己的项目中利用这个概念了。

JavaScript的一个好处是，你可以将函数技术与你已经熟悉的代码混合在一起。

即便你一开始只是为了使用高阶函数而使用，你也会很快熟悉它们所提供的额外灵活性。

现在使用高阶函数的一点工作可以在未来几年内改善你的代码。

到此这篇关于如何在JavaScript中使用高阶函数的文章就介绍到这了,更多相关js高阶函数内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

深入理解JavaScript高阶函数：从回调到函数工厂