Question

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

P.S。我不需要在任何其他演示文稿中重写我的对象，只需使它按原样工作即可。谢谢。

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

如果您使用的是es6语法，那么为什么不创建Deck类。

class Deck{
  constructor(){
    this.suits = ["hearts", "spades", "clubs", "diamonds"];
    this.cards = Array(52);
  }
  createCardPicker(){
    let pickedCard = Math.floor(Math.random() * 52);
    let pickedSuit = Math.floor(pickedCard / 13);
    return alert(this.suits[pickedSuit], pickedCard % 13)
  }
}

然后，您可以创建Deck的实例并在其中调用该方法：

let deck = new Deck();
deck.createCardPicker();

Answer 2

这是箭头功能的工作方式。它“通过” 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

但是您甚至不必绑定它

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

无法在对象方法中绑定箭头功能的上下文

2 个答案: