在 TypeScript 中，class 是一种重要的语法结构，它可以让我们更方便地组织代码，实现面向对象的编程思想。然而，在使用 class 的过程中，我们可能会遇到 this 指向问题，这往往会导致代码出错或者无法正常运行。本文将介绍 TypeScript 中 class 中的 this 指向问题及解决方式，帮助读者更好地理解和应用 TypeScript。
this 指向问题
在 TypeScript 中，this 关键字表示当前对象，它的指向是动态的，取决于当前代码的执行环境。在 class 中，this 通常指向当前实例对象。例如，下面的代码定义了一个 Person 类，其中 this.name 表示实例对象的属性：
-- -------------------- ---- -------
----- ------ -
----- -------
----------------- ------- -
--------- - -----
-
---------- -
------------------- -- ---- -- ---------------
-
-
----- ------ - --- --------------
------------------ -- --------- -- ---- -- ---在上面的代码中，当我们调用 person.sayHello() 方法时，this 指向的是 person 实例对象，因此输出的结果是正确的。
然而，在某些情况下，this 的指向可能会出现问题，导致代码出错或者无法正常运行。下面是一些常见的 this 指向问题：
1. this 指向全局对象
当我们在 class 中使用函数时，如果函数中使用了 this，那么 this 的指向可能会出现问题。例如，下面的代码定义了一个 Person 类，其中的 getName 函数返回 this.name：
-- -------------------- ---- -------
----- ------ -
----- -------
----------------- ------- -
--------- - -----
-
--------- -
------ ----------
-
-
----- ------ - --- --------------
----- ------- - ---------------
----------------------- -- ------------在上面的代码中，我们将 person.getName 赋值给了 getName 变量，并在全局环境中执行 getName 函数。此时，this 的指向变成了全局对象，因此返回的结果是 undefined。
2. this 指向其他对象
当我们在 class 中使用箭头函数时，箭头函数中的 this 指向可能会出现问题。例如，下面的代码定义了一个 Person 类，其中的 getName 函数使用箭头函数：
-- -------------------- ---- -------
----- ------ -
----- -------
----------------- ------- -
--------- - -----
-
------- - -- -- -
------ ----------
-
-
----- ------ - --- --------------
----- ------- - ---------------
----------------------- -- ------------在上面的代码中，我们使用了箭头函数来定义 getName 函数，这样就可以保证 this 的指向始终是 person 实例对象。然而，当我们将 person.getName 赋值给 getName 变量时，箭头函数中的 this 指向就会变成全局对象，因此返回的结果是 undefined。
解决方式
为了解决 this 指向问题，我们可以使用 bind、call 或 apply 方法来改变 this 的指向。这些方法都是 JavaScript 中的方法，也适用于 TypeScript 中。
1. 使用 bind 方法
bind 方法可以创建一个新的函数，将 this 的指向绑定到指定对象。例如，下面的代码使用 bind 方法将 getName 函数的 this 指向 person 实例对象：
-- -------------------- ---- -------
----- ------ -
----- -------
----------------- ------- -
--------- - -----
-
--------- -
------ ----------
-
-
----- ------ - --- --------------
----- ------- - ----------------------------
----------------------- -- ------在上面的代码中，我们使用 bind 方法将 person.getName 函数的 this 指向绑定到了 person 实例对象，从而保证了返回的结果是正确的。
2. 使用 call 或 apply 方法
call 和 apply 方法可以直接调用一个函数，并将 this 的指向绑定到指定对象。它们的区别在于传递参数的方式不同。例如，下面的代码使用 call 方法将 getName 函数的 this 指向 person 实例对象：
-- -------------------- ---- -------
----- ------ -
----- -------
----------------- ------- -
--------- - -----
-
--------- -
------ ----------
-
-
----- ------ - --- --------------
----- ------- - ---------------
---------------------------------- -- ------在上面的代码中，我们使用 call 方法将 person.getName 函数的 this 指向绑定到了 person 实例对象，从而保证了返回的结果是正确的。
总结
在 TypeScript 中，class 是一种重要的语法结构，它可以让我们更方便地组织代码，实现面向对象的编程思想。然而，在使用 class 的过程中，this 指向问题可能会导致代码出错或者无法正常运行。为了解决这个问题，我们可以使用 bind、call 或 apply 方法来改变 this 的指向。这些方法都是 JavaScript 中的方法，也适用于 TypeScript 中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65dc52a41886fbafa49bca01