javascript箭头函数是什么（碎片时间学编程）
javascript箭头函数是什么（碎片时间学编程）function sum() { return arguments[0] arguments[1]; }; sum(4 6); // 10 const arguments = [1 2 3]; const sumArrow = () => { return arguments[0] arguments[1]; }; sumArrow(4 6); // 3 (解析为 1 2) const sumRest = (...arguments) => { return arguments[0] arguments[1]; } sumRest(4 6); // 10其他差异最后，还有一些其他差异并不那么重要，但值得一提。这些包括箭头函数中缺少prototype属性，以及yield关键字可能不会在箭头函数的主体中使用的事实。后
添加图
JavaScript 的箭头函数从表面上看可能与常规函数相同，但它们有一些非常重要的区别：
- 语法差异
- this值（执行上下文）
- 方法
- 构造函数
- arguments绑定
箭头函数和常规函数之间的第一个也是最明显的区别是它们的语法。它们不仅看起来不同，而且箭头函数还提供隐式返回简写，并允许省略单个参数周围的括号。
const square = a => a * a;
// 等价函数Function square(a) { return a * a;}执行上下文
在常规函数内部，执行上下文（即 的值this）是动态的。这意味着 this 的值取决于函数的调用方式（简单调用、方法调用、间接调用或构造函数调用）。另一方面，箭头函数不定义自己的执行上下文。这导致箭头函数this在语法上被解析（即定义箭头函数的范围）。
function logThis() {
console.log(this);
}
document.addEventListener('click' logThis);
// `this` 指的是 document
const logThisArrow = () => {
console.log(this);
};
document.addEventListener('click' logThisArrow);
// `this` 指的是全局对象
Function.prototype.call() Function.prototype.bind()和 Function.prototype.apply()不能与箭头函数一起正常工作。它们的目的是允许方法在不同的范围内执行，但箭头函数的 this 值不能更改，因为它是按语法解析的。
function logThis() {
console.log(this);
}
logThis.call(42); // 记录: 42
const logThisArrow = () => {
console.log(this);
};
logThisArrow.call(42); // 记录全局对象方法
由于箭头函数没有定义自己的执行上下文，它们不适合用作方法。但是，多亏了Class fields 方案，如果我们的环境支持，箭头函数可以用作类内部的方法。
const obj = {
x: 42
logThisX: function() {
console.log(this.x this);
}
logThisXArrow: () => {
console.log(this.x this);
}
};
obj.logThisX(); // 日志: 42 Object {...}
obj.logThisXArrow(); // 日志: undefined 全局对象构造函数
常规函数可以用作构造函数，使用new关键字。内部箭头函数的词法解析的另一个结果是 this 不能用作构造函数。new与箭头函数一起使用会产生TypeError 错误.
function Foo(bar) {
this.bar = bar;
}
const a = new Foo(42); // Foo {bar: 42}
const Bar = foo => {
this.foo = foo;
};
const b = new Bar(42); // 类型错误: Bar 不是构造函数参数绑定
另一个区别是arguments对象的绑定。与常规函数不同，箭头函数没有自己的arguments对象。绕过此限制的替代方法是使用 rest 参数。
function sum() {
return arguments[0] arguments[1];
};
sum(4 6); // 10
const arguments = [1 2 3];
const sumArrow = () => {
return arguments[0] arguments[1];
};
sumArrow(4 6); // 3 (解析为 1 2)
const sumRest = (...arguments) => {
return arguments[0] arguments[1];
}
sumRest(4 6); // 10其他差异
最后，还有一些其他差异并不那么重要，但值得一提。这些包括箭头函数中缺少prototype属性，以及yield关键字可能不会在箭头函数的主体中使用的事实。后者的结果是箭头函数不能用作生成器。
