Javascript 这在ES6中的嵌套箭头函数中无法正常工作

我不熟悉箭头函数，不明白为什么我可以使用以下代码：

const adder = {
    sum: 0,
    add(numbers) {
        numbers.forEach(n => {
            this.sum += n;
        });
    }
};

adder.add([1,2,3]);
// adder.sum === 6

。。。它工作正常，但在以下情况下，

此

未正确绑定：

const adder = {
    sum: 0,
    add: (numbers) => {
        numbers.forEach(n => {
            this.sum += n;
        });
    }
};

adder.add([1,2,3]);
// Cannot read property sum

来自MDN：

箭头函数表达式的语法比函数表达式短，并且不绑定自己的this、arguments、super或new.target。（…）

这意味着在箭头函数中，

this

指的是最外面的

this

函数。如果在浏览器中运行，则

this

是

窗口

对象

使用

adder.sum

代替

this.sum

来自MDN：

箭头函数表达式的语法比函数表达式短，并且不绑定自己的this、arguments、super或new.target。（…）

这意味着在箭头函数中，

this

指的是最外面的

this

函数。如果在浏览器中运行，则

this

是

窗口

对象

使用

adder.sum

代替

this.sum

---

箭头函数允许访问词法

此

。这是定义

加法器

的上下文，而不是定义

加法器

本身

预计其工作原理如下：

function Foo () {
    // this === foo;
    this.sum = 0;

    const adder = {
        sum: 0,
        add: (numbers) => {
            numbers.forEach(n => {
                // this === foo;
                this.sum += n;
            });
        }
    };

    adder.add([1,2,3]);
}

const foo = new Foo;

及

这是一条捷径

const adder = {
    sum: 0,
    add: function (numbers) { ... }
};

---

所以

add

方法将有

adder

作为

this

调用，就像

adder一样。add（…）

箭头函数允许到达词法

这个

。这是定义

加法器

的上下文，而不是定义

加法器

本身

预计其工作原理如下：

function Foo () {
    // this === foo;
    this.sum = 0;

    const adder = {
        sum: 0,
        add: (numbers) => {
            numbers.forEach(n => {
                // this === foo;
                this.sum += n;
            });
        }
    };

    adder.add([1,2,3]);
}

const foo = new Foo;

及

这是一条捷径

const adder = {
    sum: 0,
    add: function (numbers) { ... }
};

---

所以

add

方法将有

adder

作为

this

调用，就像

adder一样。add（…）

当然，这里是

adder。add

从未调用过，外部也不可用。谢谢，为了清晰起见，我修复了它。对不起，我不明白。为什么在第一种情况下，

this.sum

指的是

adder.sum

，或者这是一个错误的假设呢？@DávidMolnár在第一种情况下，

add

是一个正则函数，它根据调用方式动态地

this

。当它像

adder.add（…）

那样被调用时，它会像

this

那样得到

adder

，因为这是调用的对象方法。这就是常规函数与箭头的区别（在重复问题中解释）。感谢比较示例，非常有用！当然，这里的

adder.add

从未被调用，外部也不可用。谢谢，为了清晰起见，我修复了它。对不起，我不明白。为什么在第一种情况下，

this.sum

指的是

adder.sum

，或者这是一个错误的假设呢？@DávidMolnár在第一种情况下，

add

是一个正则函数，它根据调用方式动态地

this

。当它像

adder.add（…）

那样被调用时，它会像

this

那样得到

adder

，因为这是调用的对象方法。这就是常规函数与箭头的区别（在重复问题中解释）。感谢比较示例，非常有用！在这两种情况下都写

console.log（this）

，然后查看。我不明白为什么会将其标记为重复。它不是关于一般的箭头函数，而是关于两个嵌套的箭头函数。在这两种情况下都写

console.log（this）

，然后查看。我不明白为什么会将其标记为重复。这不是关于一般的箭头函数，而是关于两个嵌套的箭头函数。对不起，我不明白。因此，在第一种情况下，

这个.sum

指的是

加法器.sum

，而在第二种情况下，

窗口.sum

？为什么两者之间有区别？你说这是最外面的

这个

，但这意味着这两种情况应该是相同的。它们是相同的。箭头函数不会绑定到此的任何

。因此，当您访问
this.adder
时，您正在访问上下文中的第一个
this
，可能是
窗口
对象。对不起，我不明白。因此，在第一种情况下，
这个.sum
指的是
加法器.sum
，而在第二种情况下，
窗口.sum
？为什么两者之间有区别？你说这是最外面的
这个
，但这意味着这两种情况应该是相同的。它们是相同的。箭头函数不会绑定到此

的任何

。因此，当您访问
this.adder
时，您正在访问上下文中的第一个
this
，可能是
窗口
对象。