句法

为了理解箭头函数的语法，我们应该从逐步重构一个常规函数开始：

function square(a) { return a * a; }

我们首先重构函数声明以使用变量赋值：

const square = function (a) { return a * a; }

然后，我们可以将正则重构为箭头函数 function：

const square = (a) => { return a * a; }

如果只有一个参数，我们可以省略它周围的括号：

const square = a => { return a * a; }

如果函数是单个表达式，则可以省略花括号和return语句并使用隐式返回：

const square = a => a * a;

执行上下文

箭头函数和常规函数的主要区别在于执行上下文（即 的值this）。从技术上讲，经常提到的大多数其他差异要么源于这一差异，要么是它的副作用。

在常规函数中，this它是动态的，取决于函数的调用方式：

function simple() { return this; }
const object = {
  method() { return this; }
};
class Class {
  classMethod() { console.log(this); }
}
const instance = new Class();

simple();                   // `this` 指向全局对象
new simple();               // `this` 指向新创建的实例

object.method();            // `this` 指的是 `object`
simple.call(object);        // `this` 指的是 `object`

instance.classMethod();     // `this` 指向 `instance`
setTimeout(
  instance.classMethod, 0   // `this` 指向全局对象
);

与常规的箭头函数不同，箭头函数不定义自己的执行上下文，因此this箭头函数内部总是指的是词法this（即定义箭头函数的范围）。

const simple = () => this;
const object = {
  method: () => this
};
class Class {
  classMethod = () => { console.log(this); }
}
const instance = new Class();

simple();                   // `this` 指向全局对象
new simple();               // 未捕获的 TypeError：simple 不是构造函数
object.method();            //`this` 指的是全局对象
simple.call(object);        // `this` 指的是全局对象

instance.classMethod();     // `this` 指的是`instance`
setTimeout(
  instance.classMethod, 0   // `this` 指的是`instance`
);

正如您从这些示例中看到的那样，构造函数的工作方式因执行上下文及其解析方式而有所不同。与将抛出一个箭头函数相反，常规函数可以用作构造函数TypeError。

此外，箭头函数和常规函数在用于定义类方法时存在一些差异。当作为回调传递时，常规函数方法将以不同的执行上下文结束。这可以使用Function.prototype.bind()或使用不存在此问题的箭头函数来处理。

更多内容请访问：https://www.icoderoad.com