在 ES6 中，class 是一种新的语法糖，让 JavaScript 中的面向对象编程更加方便和易读。然而，在使用 class 的过程中，我们经常会遇到 “this” 的问题，这可能会导致代码出现一些不可预期的错误。本文将深入探讨 ES6 class 中的 “this” 问题，并提供解决方法。
什么是 “this”？
在 JavaScript 中，“this” 是一个关键字，代表了当前函数或方法的执行上下文。在不同的情况下，“this” 的值会有所不同，它可能是全局对象、函数的调用者或者是一个新创建的对象。
在 ES6 class 中，“this” 通常用于引用当前实例的属性或方法。例如：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
---------- -
------------------- -- ---- -- ---------------
-
-
----- ------ - --- ---------------
------------------ -- --------- -- ---- -- ----在上面的代码中，我们在 Person 类中定义了一个 sayHello 方法，它使用了 “this.name” 引用了当前实例的 name 属性。
ES6 class 中的 “this” 问题
然而，在使用 ES6 class 的过程中，我们会遇到一些 “this” 的问题，这可能会导致代码出现一些不可预期的错误。
问题一：this 的值可能会变化
在 JavaScript 中，函数调用的方式决定了 “this” 的值。同样，在 ES6 class 中，方法的调用方式也决定了 “this” 的值。例如：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
---------- -
------------------- -- ---- -- ---------------
-
-
----- ------ - --- ---------------
----- -------- - ----------------
----------- -- --------- ---- -------- ------ -- ---------在上面的代码中，我们将 person 的 sayHello 方法赋值给了 sayHello 变量，并调用了它。然而，由于调用方式的不同，导致了 “this” 的值变成了 undefined，从而导致了错误。
问题二：this 的值可能会丢失
在 JavaScript 中，如果一个函数或方法不是作为对象的属性或方法被调用，那么 “this” 的值将会是全局对象（在浏览器中是 window 对象）。同样，在 ES6 class 中，如果一个方法被单独调用，那么 “this” 的值也将会是全局对象。例如：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
---------- -
------------------- -- ---- -- ---------------
-
-
----- ------ - --- ---------------
----- -------- - ----------------
----------- - ---------
------------------ -- --------- -- ---- -- ----
----------- -- --------- -- ---- -- ------在上面的代码中，我们定义了一个全局的 name 属性，并将 person 的 sayHello 方法赋值给了 sayHello 变量。当我们调用 person 的 sayHello 方法时，“this” 的值是 person 实例，因此输出了正确的结果；但当我们调用 sayHello 变量时，“this” 的值是全局对象，因此输出了错误的结果。
解决方法
为了解决 ES6 class 中的 “this” 问题，我们可以使用箭头函数或者 bind 方法来明确指定 “this”的值。
解决方法一：箭头函数
在 JavaScript 中，箭头函数不会创建自己的执行上下文，它会继承外部函数的执行上下文。因此，在使用箭头函数时，我们可以避免 “this” 的值发生变化或丢失的问题。例如：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
------------- - -- -- -
------------------- -- ---- -- ---------------
-
-
-
----- ------ - --- ---------------
----- -------- - ----------------
----------- -- --------- -- ---- -- ----在上面的代码中，我们使用箭头函数来定义了 sayHello 方法，它继承了外部函数的执行上下文，因此 “this” 的值指向了 person 实例。
解决方法二：bind 方法
在 JavaScript 中，bind 方法可以将函数的执行上下文绑定到指定的对象上，并返回一个新的函数。因此，在使用 bind 方法时，我们可以明确指定 “this”的值。例如：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
------------- - ---------- -
------------------- -- ---- -- ---------------
-------------
-
-
----- ------ - --- ---------------
----- -------- - ----------------
----------- -- --------- -- ---- -- ----在上面的代码中，我们使用 bind 方法将 sayHello 方法的执行上下文绑定到了 person 实例上，因此 “this” 的值指向了 person 实例。
结论
在 ES6 class 中，我们经常会遇到 “this” 的问题，这可能会导致代码出现一些不可预期的错误。为了避免这些问题，我们可以使用箭头函数或者 bind 方法来明确指定 “this”的值。在实际开发中，我们应该根据具体情况选择合适的解决方法，以确保代码的正确性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6746d123e504cb428ec5eabf