关于TypeScript中let声明与函数this指向的困惑咨询

嘿，我来帮你拆解这个TypeScript手册里的例子，搞清楚let声明和箭头函数的作用~

首先先补全你没写完的完整可运行代码：

let deck = {
  suits: ["hearts", "spades", "clubs", "diamonds"],
  cards: Array(52),
  createCardPicker: function() {
    // 箭头函数会捕获当前上下文的`this`
    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();

console.log(`Card: ${pickedCard.card} of ${pickedCard.suit}`);

关于let声明的关键点 #

这里用let声明pickedCard和pickedSuit，核心是块级作用域的特性：

• let声明的变量只在当前代码块（这里就是箭头函数的函数体）内有效，每次调用cardPicker()时，都会创建全新的变量绑定，不会和其他调用的变量产生冲突。
• 对比var声明：var是函数级作用域，如果用var的话，虽然这个例子里不会出现问题，但在循环或者多次调用的场景下，容易出现变量共享、值被覆盖的bug。let从根源上避免了这类问题，是TypeScript/ES6推荐的变量声明方式。

箭头函数与this的捕获 #

这个例子里箭头函数的作用和let同样关键：

• createCardPicker是普通函数，当通过deck.createCardPicker()调用时，它内部的this指向deck对象。
• 返回的箭头函数不会创建自己的this，而是捕获外层函数createCardPicker的this，所以后续调用cardPicker()时，箭头函数里的this依然指向deck，才能正常访问this.suits数组。
• 如果换成普通函数返回，调用cardPicker()时this会指向全局对象（非严格模式）或undefined（严格模式），就会报错无法访问suits。

这样拆分下来，应该就能明白这个例子里let和箭头函数各自的作用啦~

内容的提问来源于stack exchange，提问作者Sy C Dang