JavaScript中的箭头函数

箭头函数是在JavaScript中编写函数表达式的简明方法。当您编写一个小函数作为另一个函数的参数时，它们很有用。

这是箭头函数的语法：

(parameters) => { statements }

例如，以下代码定义了一个函数add，它接受两个参数x和y，并返回它们的总和：

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

如果函数体由单个语句组成，则可以省略花括号和return关键字：

const add = (x, y) => x + y;

您还可以使用箭头函数创建一个不执行任何操作的函数：

const noop = () => {};

当您不需要这些功能时，箭头函数没有自己的this、arguments、super或new.target绑定。

箭头函数和this关键字

在JavaScript中，this关键字指的是拥有当前执行上下文的对象。在全局执行上下文中，this指的是全局对象（浏览器中的window或Node. js中的global）。在常规函数中，this的值由函数的调用方式决定。

相比之下，箭头函数内部this的值由周围的词法上下文决定。换句话说，箭头函数内部this的值与函数外部this的值相同。

这是一个演示这种差异的例子：

const obj = {
  message: 'Hello',
  sayHello: function() {
    console.log(this.message);
  },
  sayHelloArrow: () => {
    console.log(this.message);
  }
};

obj.sayHello(); // Output: 'Hello'
obj.sayHelloArrow(); // Output: undefined

在上面的示例中，常规函数sayHello记录obj的message属性,但是箭头函数sayHelloArrow日志为undefined，因为箭头函数内部this的值是全局对象（它没有message 属性）。

箭头函数在JavaScript中很有帮助，原因有很多：

简洁的语法 ：正如我之前提到的，箭头函数具有简洁的语法，这使得它们更易于编写和阅读。当您需要编写一个小函数作为另一个函数的参数时，这特别有用。
无this绑定：正如我之前提到的，箭头函数没有自己的this绑定，这意味着箭头函数内部this的值与函数外部this的值相同。这在您想从封闭范围访问this的值的情况下会很有帮助。
无arguments对象：箭头函数没有自己的arguments对象，这意味着您不能使用箭头函数中的arguments对象来访问传递给函数的参数。相反，您可以使用其余参数语法（...args）作为数组访问参数。
不能用作构造函数：箭头函数不能用作构造函数，这意味着您不能将new运算符与箭头函数一起使用。这在您想阻止函数用作构造函数的情况下很有帮助。

‍

6.JavaScript中的箭头函数

JavaScript中的箭头函数

箭头函数和this关键字