javascript - 无法在对象方法中的箭头函数上绑定(bind)上下文

Question

所以，我有一个学校示例，但是使用 createCardPicker: () => {} 之类的箭头函数方法，它不起作用并且看不到上下文。为什么？

附言我不需要在任何其他演示文稿中重写我的对象，只是让它按原样工作。谢谢。

let deck = {
    suits: ["hearts", "spades", "clubs", "diamonds"],
    cards: Array(52),
    createCardPicker: () => {
        return () => {
            let pickedCard = Math.floor(Math.random() * 52);
            let pickedSuit = Math.floor(pickedCard / 13);

            return alert(this.suits[pickedSuit], pickedCard % 13)
        }
    }
}

deck.createCardPicker.bind(deck)()(); //undefined

Answer 1

这就是箭头函数的工作方式。它“通过”this 一个级别。

这将如您所愿地工作:

let deck = {
    suits: ["hearts", "spades", "clubs", "diamonds"],
    cards: Array(52),
    createCardPicker: function() {
        return () => {
            let pickedCard = Math.floor(Math.random() * 52);
            let pickedSuit = Math.floor(pickedCard / 13);

            return `${this.suits[pickedSuit]} ${pickedCard % 13}`
        }
    }
}

console.log(deck.createCardPicker.bind(deck)()()); //undefined

但是你甚至不必绑定(bind)它

let deck = {
    suits: ["hearts", "spades", "clubs", "diamonds"],
    cards: Array(52),
    createCardPicker: function() {
        return () => {
            let pickedCard = Math.floor(Math.random() * 52);
            let pickedSuit = Math.floor(pickedCard / 13);

            return `${this.suits[pickedSuit]} ${pickedCard % 13}`
        }
    }
}

console.log(deck.createCardPicker()()); //undefined