Question

我是箭头功能的新手，我不明白为什么我可以使用这段代码：

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

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

...它的工作正常，但在下列情况下，this未正确绑定：

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

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

Answer 1

来自MDN：

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

意味着在箭头函数中，this指的是最多的this。如果您在浏览器中运行该代码，则this是window对象。

使用adder.sum代替this.sum。

Fiddle

Answer 2

箭头功能允许达到词汇this。哪个是定义adder的上下文，而不是adder本身。

预计会这样工作：

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(numbers) { ... }
};

是

的快捷方式

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

所以add方法在adder被称为this时会adder.add(...)为lit。

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

2 个答案: