在本教程中,您将了解 JavaScript 匿名函数。

JavaScript 匿名函数简介

匿名函数是没有名称的函数。下面展示了如何定义一个简单的匿名函数:

(function () {
   //...
});
请注意,如果您不将匿名函数放在 () 中,则会出现语法错误。() 使匿名函数成为返回函数对象的表达式。

匿名函数在创建后不可访问。因此,您经常需要将其分配给一个变量。例如,下面展示一个打印消息的匿名函数:

let show = function() {
    console.log('Anonymous function');
};

show();

在此示例中,匿名函数在关键字 function() 括号之间没有名称。因为后面需要调用匿名函数,所以我们把匿名函数赋值给 show 变量。

由于匿名函数对 show 变量的赋值构成一个有效的表达式,因此您无需将匿名函数括在括号 () 中。

匿名函数作为参数

实际上,您经常将匿名函数作为参数传递给其他函数。例如:

setTimeout(function() {
    console.log('Execute later after 1 second')
}, 1000);

在这个例子中,我们将一个匿名函数传递给函数 setTimeout()setTimeout() 函数在一秒钟后执行此匿名函数。

请注意,函数是 JavaScript 的一等公民。因此,您可以将一个函数作为参数传递给另一个函数。

IIFE 立即调用函数执行

如果你想创建一个函数并在声明后立即执行,你可以这样声明一个匿名函数:

(function() {
    console.log('IIFE');
})();

代码是如何运行的。

首先,定义一个函数表达式,表达式返回一个函数。:

(function () {
    console.log('Immediately invoked function execution');
})

其次,通过添加尾随括号 () 来调用函数:

(function () {
    console.log('Immediately invoked function execution');
})();

有时,您可能希望将参数传递给 IIFE 立即调用函数,如下所示:

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

(function () {
    console.log(person.firstName} + ' ' + person.lastName);
})(person);

箭头函数

ES6 引入了箭头函数表达式,为声明匿名函数提供了简写形式。例如,这个函数:

let show = function () {
    console.log('Anonymous function');
};

...可以使用箭头函数缩短:

let show = () => console.log('Anonymous function');

同样,下面的匿名函数:

let add = function (a, b) {
    return a + b;
};

...在功能上等同于以下箭头函数:

let add = (a, b) => a + b;   

结论

  • 匿名函数是没有名称的函数。
  • 匿名函数可以用作其他函数的参数或作为立即调用的函数执行。