箭头函数 => 常规函数有什么问题吗？

普通的有什么问题吗？" />

如果您扩展了 JavaScript 知识并想知道为什么他们会在 ECMAScript 2015 (ES6) 中添加箭头函数，那么您并不孤单。当我加深对这门语言及其复杂性和怪癖的了解时，我发现自己也在想同样的事情。在这篇文章中，我将列出它的差异、优点、添加它的原因以及何时应该使用它。

我们来谈谈差异

在引入箭头函数之前，必须以传统格式声明函数，如下所示：

function add(x, y) {
  return x + y;
}

或声明为表达式：

const addFunction = function add(x, y) {
  return x + y;
}

引入箭头函数，可以写成：

const addFunction = (x,y) => x + y

简洁的语法

从上面的例子中，我们可以很容易地看出，通过使用箭头函数并利用其隐式返回特性，可以将函数快速重构为一行。生成的代码更简洁、更清晰、更易于阅读，从而使开发更顺畅、调试更快。

吊装

默认情况下，JavaScript 运行时会在创建执行上下文时将所有函数和变量声明提升到其作用域的顶部。例如，在全局范围内，这可确保声明的所有函数和变量可供以后调用的所有函数使用。但是，箭头函数永远不会被提升，从而可以更好地控制函数执行位置及其有权访问的变量的精确位置。

语境

每次执行 JavaScript 函数时，它都会创建一个执行上下文，其中包含有关该函数运行的环境的信息，包括 this 的值。虽然传统函数在其自己的上下文中执行，但箭头函数将始终继承调用它的函数的上下文。
使用以下代码：

class Person {
    constructor(){
        this.name = "George";
        this.greetings = ["Good Morning,","Hello!","Howdy!"];
    }

    printGreetings(){
        this.greetings.forEach(function print(greet){
            console.log(`${greet} ${this.name}`);
        });
    }
}

let person = new Person();
person.printGreetings();

我们会得到一个错误：Cannot read property 'forEach' of undefined，这是因为虽然 printGreetings 函数位于 Person 类的上下文中并继承了它的上下文，但 forEach 函数（即使它的内置 JavaScript 函数） 在其自己的上下文中运行，该上下文不包含 this.name 属性，因此会导致查找错误。

然而，箭头函数永远不会在自己的上下文中运行，并且通过使用箭头函数重写上面的函数...

printGreetings(){
    this.greetings.forEach((greet) => {
        console.log(`${greet} ${this.name}`);
    });
}

结果将如预期

function add(x, y) {
  return x + y;
}

概括

总结箭头函数的好处；它们允许更短、更简洁的代码；提供功能块代码的隐式返回；不会提升到执行上下文的顶部并保持其在代码中的确切位置；最后，它们继承调用它的函数的上下文，而不执行它自己的上下文，从而允许更可预测地使用此关键字。

希望这篇文章可以帮助您更好地理解传统函数与箭头函数的区别和优点，并让您在 JavaScript 之旅中更进一步！

进一步阅读：
Dmitri Pavlutin 博客 - 箭头函数与常规函数之间的差异
MDN 参考文档 - 箭头函数

以上是箭头函数 => 常规函数有什么问题吗？的详细内容。更多信息请关注PHP中文网其他相关文章！