JavaScript 我们能在箭头函数中使用函数提升吗

在本文中，我们将看到函数提升在JavaScript中的工作原理，使用普通函数和箭头函数两种方式。

箭头函数： 箭头函数是ES6中引入的一种在JavaScript中编写函数的简洁方式。它还提供了一个重要的优势，就是它不会绑定自己的上下文。换句话说，在箭头函数中，上下文是词法或静态定义的。我们也可以说箭头函数是一个箭头语法，它减少了用户使用传统冗长语法声明函数的工作量。

函数提升： 在JavaScript中，函数提升是将所有声明提前到代码执行之前的默认行为。基本上，它给我们带来一个优势，无论函数和变量在何处声明，它们都会在其作用域的顶部移动，无论其作用域是全局还是局部。

语法： 让我们来看一下JavaScript中创建箭头函数的下面所示的语法：

1. 使用var：

var geekforggeks = (argument1, argument2, ...other_arguments) => {
    // body
}

2. 使用let：

let geekforggeks = (argument1, argument2, ...other_arguments) => {
    // body
}

3. 使用 const：

const geekforggeks = (argument1, argument2, ...other_arguments) => {
    // body
}

像 JavaScript 中的所有其他函数一样，箭头函数不能在初始化之前调用，这是不提升的主要原因。 因为提升是在代码执行之前将所有声明移动到作用域的顶部的默认操作。JavaScript 为其所有变量分配内存。因此，无论函数和变量在何处声明，它们都会被移到其作用域的顶部，而不管其作用域是全局的还是局部的。另一个原因是箭头函数是匿名函数或函数表达式。

现在让我们通过一些示例来理解这个：

示例 1： 在这个示例中，我们展示了我们可以在定义函数之前访问该函数。如果在初始化之前调用变量，它不会抛出错误，而是给出 undefined 作为输出。这意味着该值未定义。在这里，我们使用了一个普通函数而不是箭头函数。

Javascript

<script>
    gfg();
    console.log(input1);
    var input1 = 8;
    function gfg() {
        console.log("Hoisting in javascript")
    }
</script>

输出:

解释： 所以我们可以访问变量名input1，然后它在浏览器的控制台中抛出undefined。JavaScript中抛出undefined的主要原因是为了保留x的内存，并将特殊的占位符undefined放置在它上面。

示例2： 在这个示例中，我们将展示如果我们使用箭头函数（使用var关键字本身上述语法）并且如果我们想要访问该值，那么它将在浏览器的控制台中抛出未捕获的TypeError。

JavaScript

<script>
    gfg2();
    console.log(gfg2);
    var input1 = 8;
    var gfg2 = () => {
        console.log("function calling");
    }
</script>

输出：

说明： 现在它显示出了一个未捕获的类型错误，即gfg2不是一个函数。原因是gfg2表现得像另一个变量，并且它分配了内存，并使用undefined作为占位符。