TypeScript中this依赖

前言

作为一个原生开发（java、flutter），其实很少遇到过this的问题，this一般都能在开发期间就准确判断是来源于哪个对象，但是在React中就不一样了，经常看到过this相关的问题。例如cant find methos *** in window。乍一看没啥，实际上是因为this此刻指的是window，那this.xxx就出现了问题。

this是什么

在TS中，this指向当前方法运行时所属的对象。

如何判断this是什么

当JavaScript里的一个函数被调用时，你可以按照下面的顺序来推断出this指向的是什么（这些规则是按优先级顺序排列的）：

• 如果这个函数是function#bind调用的结果，那么this指向的是传入bind的参数
• 如果函数是以foo.func()形式调用的，那么this值为foo
• 如果是在严格模式下，this将为undefined
• 否则，this将是全局对象（浏览器环境里为window）

例如：

class Foo {
  x = 3;
  print() {
    console.log('x is ' + this.x);
  }
}

// 传统调用，f创建对象，f调用方法
var f = new Foo();
f.print(); 
// 和预期一致，打印出来了3

// 把方法print作为参数传给另一个对象z
var z = { x: 10, p: f.print };
z.p(); 
// 此刻p中的this指向的是当前的对象z，所以打印出来了10

var newp = z.p;
newp(); 
// 此刻this指向的是变量newp所在的对象，即window对象中，那么使用newp方法，会报undefined，因为当前对象中不存在x

参考文章：

1.  TypeScript里的this · TypeScript Handbook（中文版）
2.  TypeScript类中的this作用域详解_typescript this-CSDN博客
3.  TypeScript：箭头函数中的this_typescript this作用域-CSDN博客
4.  详解Typescript里的This - 知乎