JavaScript 解释在function foo() {}和var foo = function() {}之间使用foo时的区别

这里我们可以看到在JavaScript中， function foo() {} 和 var foo = function() {} 这两种函数声明类型下使用foo的区别。

function foo() {} 是普通的函数声明方式，每个用户或开发者都觉得它更简单，可以在需要的时候声明和使用。

var foo = function() {} 是匿名函数声明或表达式的函数。它通过一个变量来封装，换句话说，可以理解为它是一个将函数包装在内部的变量，因此该变量不再保持变量状态，最终成为一个可以访问的函数本身，实际上称为普通的函数调用在JavaScript中发生。现在让我们看看区别:

1. 通过名称:

当我们在函数名之前使用关键字 function 时，这被称为普通函数或函数声明。

当我们在没有函数名的情况下使用关键字 function 时，这被称为匿名函数或表达式函数。

普通函数或函数声明:

这里foo是函数名。

function foo() {
    // Function Body
} 

匿名函数或表达式函数： 在这里，函数在变量 foo 中存储，使用var关键字。

var foo = function() {
    // Function Body
}

我们经常将匿名函数写成箭头函数，这是由ES6引入的（推荐）。

var foo = () => {
    // Function Body
}

同时，在初始化箭头函数时，我们也可以使用let关键字，其语法如下所示：

let foo = () => {
    // Function Body
}

2. 实现： 在这里，我们看到如何在正常 函数 和 匿名函数 中调用 该函数 。当调用任何普通 函数 或 匿名函数 （包裹在任何变量内部）时，调用方式与调用普通 函数 相似。

Normal Function 或 Function Declaration： 在这里，我们使用 **** 函数的 名称 “foo” 来调用整个 函数 。

Javascript

<script>
    function foo() {
      console.log("hello");
    };
     
    foo();
</script>

输出:

hello

在这里我们可以在声明或者定义函数之前调用函数“foo”。这意味着我们可以在代码中的任何位置声明或者定义函数。

Javascript

<script>
foo(); 
 
function foo() {
  console.log("hello");
};
</script>

输出:

hello

匿名函数或表达式函数： 在这里我们使用变量foo来调用整个函数。

Javascript

<script>
    var foo = function() {
        console.log("hello");
    };
     
    foo();
</script>

输出：

hello

在声明函数之前调用函数将引发错误。

Javascript

<script>
    foo();
     
    var foo = function() {
      console.log("hello");
    };
</script>

输出:

TypeError: foo is not a function 

现在让我们来看一下下面的实现，这个实现是使用 Arrow Function 语法（在 ES6 中实现）。

JavaScript

let foo  = () => {
    console.log("Hello World...!!");
}
 
foo();
 
// This code is contributed by Aman Singla....

输出：

Hello World...!!

3. 传递参数： 在这里，我们将看到如何在函数内传递参数。

普通函数或函数声明： 在这里，我们只有在调用整个函数时才传递参数，通过函数名。 ****

Javascript

<script>
    function foo(x,y) {
      console.log(x+y);
    };
     
    foo(1,3);
</script>

输出：

4

匿名函数或表达式函数： 在这里，我们只会在通过变量名调用整个函数时传递参数。

Javascript

<script>
    var foo = function(x,y) {
      console.log(x+y);
    };
     
    foo(1,3);
</script>

输出:

4

以下是使用箭头函数实现上面代码片段的语法：

Javascript

let foo  = (x , y) => {
    console.log(x + y);
}
 
foo( 7 , 8);
 
// This code is contributed by Aman Singla....

输出：

15

4. 自执行函数： 这里，当函数被创建时，函数会立即调用。我们使用匿名函数。

JavaScript

<script>
    (function(x,y){
      console.log(x+y);
    })
     
    (2,3);
</script>

输出：

5