JavaScript 中匿名函数和命名函数的区别

在 JavaScript 或任何编程语言中，函数、循环、数学运算符和变量是使用最广泛的工具。本文将告诉您匿名函数和命名函数之间的区别。我们将在本文中讨论所有必需的概念，以了解命名和匿名函数的输入和输出。

匿名函数：顾名思义，“匿名函数”是指没有名称或标题的函数。在 JavaScript 中，匿名函数是在没有标识的情况下声明的东西。这是常规函数和匿名函数之间的区别。匿名函数创建后无法访问；它只能由作为函数值存储的变量检索。匿名函数可以有多个参数，但只有一个表达式。

句法：

function(){
   // Function Body
}

让我们通过例子来理解。

示例 1：我们构建了一个匿名函数，在此示例中将消息打印到控制台。之后，该函数被保存在测试变量中。我们可以通过调用 test() 来调用该函数。

Javascript

   var test = function () {
      console.log("This is an anonymous function!");
   };
   test();

输出：

This is an anonymous function!

示例 2：匿名函数也可以接受参数。

Javascript

   var test = function (platform) {
      console.log("This is an anonymous ", platform);
   };
  
   test("function!");

输出：

This is an anonymous function!

我们确实可以将匿名函数作为参数传递给另一个函数，因为 JavaScript 允许使用高阶函数。

示例 3：这里，我们向 setTimeout() 方法发送一个匿名函数作为回调函数。这会在 1500 毫秒后调用匿名函数。

Javascript

   setTimeout(function () {
   console.log("This is an anonymous function!");
   }, 1500);

输出：

This is an anonymous function!

命名函数：在 JavaScript 中，命名函数只是一种引用函数的方式，该函数使用函数关键字后跟一个可以用作该函数回调的名称。具有名称或标识符的普通函数称为命名函数。它们可以在表达式中使用或在语句中声明。函数的名称存储在它的主体中，这很方便。我们可以使用这个名字来获取一个函数来调用它自己，或者像每个对象一样检索它的属性。

句法：

function displayMessage(){
 // function..body
}

让我们通过一些例子来理解这个概念：

示例 1：我们将在此示例中定义一个打印消息的普通函数。

Javascript

   function test() {
       console.log (`This is a named function!`);
   };

输出：

This is a named function! 

示例 2：您可以将命名函数添加到对象上的变量中，然后调用对象上的函数。

Javascript

   function test() {
       console.log (`This is a ${this.func}`);
   }
   const func = {
       func: 'named function!',
       test
   }
   func.test();

输出：

This is a named function!
 

示例 3：在 JavaScript 中，命名函数是调用函数的最常见方式之一。你会一直碰到他们。这里值得一提的一点是如何使用 return 关键字从函数中返回一个值。这不仅限于命名函数。

Javascript

   function createPerson(firstName, lastName) {
       return {
           firstName: firstName,
           lastName: lastName,
           getFullName() {
               return firstName + ' ' + lastName;
           }
       }
   }
   let name = createPerson('This is a', 'named function!');
     
   console.log(name.getFullName());

输出：

This is a named function!

匿名函数和命名函数之间的区别：

Anonymous functions	Named Functions
In JavaScript, anonymous functions (function expression) are those that are produced without a name or identifier to refer to them; they are defined as : function(){   // Function Body }	Normal functions (function declaration) having a name or identifier to refer to them are referred to as named functions and are defined as: function displayMessage(){ // function..body }
Anonymous functions are never hoisted (loaded into memory at compilation).	Named functions are hoisted (loaded into memory at compilation).
When invoking an anonymous function, you can only call it after the declaration line.	A name function can be invoked before declaration.
Before ES6, the name properties of anonymous functions were set to the empty string.	Before ES6, the name properties of named functions were set to their function names.
For easier programming, anonymous functions allow context scoping. When functions are utilized as data, arrow functions should be used.	Because the function name appears in the error log, named functions are highly useful in debugging and determining which function produced an error.
Anonymous functions can be very handy when developing IIFEs (Instantly Invoked Function Expressions).	Named functions are easier to reuse, which aids in the creation of clean code.