Typescript 或者Javascript中this指向问题

JavaScript 或者Typescript 中普通函数和箭头函数的this绑定规则不同:

　　1.普通函数的this是在调用时确定的，取决于函数的调用方式

　　2.箭头函数的this是在定义时确定的，继承自外层作用域的this

比较这两段代码:

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

            return {suit: this.suits[pickedSuit], card: pickedCard % 13};
        }
    }
}

let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();

alert("card: " + pickedCard.card + " of " + pickedCard.suit);

let deck = {
    suits: ["hearts", "spades", "clubs", "diamonds"],
    cards: Array(52),
    createCardPicker: function() {
        // NOTE: the line below is now an arrow function, allowing us to capture 'this' right here
        return () => {
            let pickedCard = Math.floor(Math.random() * 52);
            let pickedSuit = Math.floor(pickedCard / 13);

            return {suit: this.suits[pickedSuit], card: pickedCard % 13};
        }
    }
}

let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();

alert("card: " + pickedCard.card + " of " + pickedCard.suit);

这两段代码的核心区别在于createCardPicker方法返回的函数类型不同，这导致了this关键字的指向不同，进而影响代码的运行结果。

 

具体区别分析：

1. 第一段代码（普通函数）：
   • createCardPicker返回一个普通函数
   • 当调用这个返回的函数时，this的指向取决于函数的调用方式（默认情况下可能是window或undefined在严格模式下）
   • 因此访问this.suits会导致错误，因为此时this并不指向deck对象
2. 第二段代码（箭头函数）：
   • createCardPicker返回一个箭头函数
   • 箭头函数没有自己的this绑定，它会捕获定义时所在上下文的this值
   • 这里箭头函数定义在createCardPicker方法内部，因此它捕获的this就是deck对象
   • 所以this.suits能够正确访问到deck对象的suits属性

• 总结来说，第二段代码使用箭头函数解决了this指向的问题，确保在返回的函数中能够正确访问到deck对象的属性。这是箭头函数最常用的场景之一：解决函数嵌套中的this绑定问题。