TypeScript转译后this引用发生变更，如何阻止该行为？

这个问题其实是箭头函数的词法作用域this绑定特性导致的，TypeScript转译时严格遵循了这个特性，所以才会把箭头函数里的this替换成外部上下文的_this，最终导致你取不到对象的属性。下面给你两种靠谱的解决办法：

方法一：改用普通函数作为对象方法 #

把fullName的箭头函数改成普通函数语法，这样当调用person.fullName()时，this会动态绑定到调用它的person对象上，TS转译时也不会修改this的指向：

interface IPerson { 
  firstName: string; 
  lastName: string; 
  age: number; 
  fullName: () => string 
}
var person: IPerson = {
 firstName: "Tom",
 lastName: "Hal",
 age: 25,
 // 改用普通函数写法
 fullName(): string {
   return this.firstName + ' ' + this.lastName;
 }
}
console.log(person.fullName()); // 输出 "Tom Hal"
console.log(person.age); // 输出 25

转译后的JavaScript代码会是这样，this会正确指向person：

var person = {
    firstName: "Tom",
    lastName: "Hal",
    age: 25,
    fullName: function () {
        return this.firstName + ' ' + this.lastName;
    }
};
console.log(person.fullName());
console.log(person.age);

方法二：直接引用对象变量（不推荐，有局限性） #

如果你非要用箭头函数，可以直接通过person变量访问属性，而不是依赖this：

interface IPerson { 
  firstName: string; 
  lastName: string; 
  age: number; 
  fullName: () => string 
}
var person: IPerson = {
 firstName: "Tom",
 lastName: "Hal",
 age: 25,
 fullName: (): string => {
   return person.firstName + ' ' + person.lastName;
 }
}
console.log(person.fullName()); // 输出 "Tom Hal"

不过这种方法有个明显的问题：如果后续person变量被重新赋值，fullName里的引用就会失效，所以还是第一种方法更稳妥。

为什么会出现这个问题？ #

箭头函数的this是在定义时就绑定的，它会捕获所在上下文的this（这里是全局作用域的this），而普通函数的this是在调用时动态绑定的，指向调用它的对象。TypeScript转译箭头函数时，会把这种词法绑定的逻辑转换成var _this = this;的形式，所以你原来的箭头函数里的this其实指向的是全局对象，自然取不到firstName和lastName。

内容的提问来源于stack exchange，提问作者nkarmi