硬盘|web前端 - JavaScript 中一流函数的日常用例数码

什么是“一流函数”？
维基百科的定义：
在计算机科学中，如果一种编程语言将函数视为一等公民，那么它就被称为具有一等函数。这意味着该语言支持将函数作为参数传递给其他函数，将它们作为其他函数的值返回，并将它们分配给变量或将它们存储在数据结构中。
例如，在 JavaScript 中，我们可以将一个函数分配给一个变量。
var sum = function(a b) {
return a + b;

var total = sum(10 1);
如果我们是第一次阅读，这个定义会有点混乱。然而，事实是我们在不知情的情况下使用了它。
AddEventListener — 学习 JavaScript 的第一课
过去，引入 JavaScript 是为了向网站添加动态行为。例如，我们希望在用户单击按钮时更改文本。当有人学习 JavaScript 时，这是第一行代码。
<html>
<body>
<p id=\"text\">The text will change when you click on the button</p>
<button type=\"button\" id=\"btn\">Click me!</button>
<script>
let btn = document.getElementById(\"btn\");
let text = document.getElementById(\"text\");
btn.addEventListener(\"click\" function() {
text.innerHTML = \"New text!\"
);
</script>
</body>
</html>
在第 9 行，我们将函数作为参数传递给 addEventListener 方法。该功能与按钮的“单击”事件相关联。当事件被触发时，该函数将运行。
让我们好奇——第 1 部分
要了解该功能的作用，让我们考虑一下它不可用的语言。无论使用何种编程语言，添加动态行为在 UI 开发中都很常见。如果我们不能将函数作为参数传递怎么办？我期待您在留言区与我们分享您的看法。
发送 HTTP 请求——JavaScript 中的常见任务
我以Axios为例。它是最流行的用于发送 HTTP 请求的 JavaScript 库之一。在一个项目中，我们可能需要添加一些常用的配置。
例如，要将 JWT 发送到服务器，我们希望将标头 Authorization 添加到所有请求。因此，我们需要一个函数来抓取 JWT 并将其添加到标题中。
可以使用拦截器来完成。
// Add jwt to all requests using interceptors
axios.interceptors.request.use(function (config) {
const jwt = globalStore.getJWT(); // assume the token is saved in a global store.
config.headers[\"Authorization\"
= `Bearer ${jwt`;
return config;
null { synchronous: true );
【硬盘|web前端 - JavaScript 中一流函数的日常用例】同样，我们传递 2 个函数作为 use 方法的参数。第一个函数在请求的标头中设置令牌。
如果出现错误，则第二个函数将运行（为简单起见，我们没有在此处定义它）。 Axios在处理一个请求时，会一一运行所有的拦截器，将用户的配置转化为完整配置。
然后它将请求发送到服务器。
Axios 处理拦截器的方式很好地说明了 JavaScript 中的一流函数。
// ------------------------------- inside inteceptor's use method ------------------------//
InterceptorManager.prototype.use = function use(fulfilled rejected options) {
this.handlers.push({
fulfilled: fulfilled
rejected: rejected
synchronous: options ? options.synchronous : false
runWhen: options ? options.runWhen : null
);
return this.handlers.length - 1;
;
// -------------------------------- process interceptors ---------------------------------//
// filter out skipped interceptors
var requestInterceptorChain = [