在 ES5 的时代，JavaScript 被诟病最多的就是 this 的问题。随着 ES6 的到来，this 的问题有了解决方案，本文将为大家介绍 ES6 中解决 this 问题的技巧，并提供详细的示例代码，帮助读者更好地理解和掌握这些技巧。
示例代码
在介绍 ES6 中解决 this 问题的技巧之前，我们先来看一下一个示例代码，该代码演示了在 ES5 时代，this 带来的问题。
-- -------------------- ---- -------
--- --- - -
----- ------
------ -------- -- -
------------------- -- -
------------------- - - --------- - -----
-- ------
-
--
------------ -- -- ------- -----------在上面的示例代码中，我们通过 obj.hello() 调用 obj 对象的 hello 方法，该方法在 1 秒钟之后向控制台输出一条问候语。但是，在输出的问候语中，this.name 的值是 undefined，这是因为闭包中的 this 指向的是全局对象（在浏览器中是 window），而不是 obj 对象。
下面，我们将会介绍一些解决 this 问题的技巧，帮助读者避免这种问题。
箭头函数
ES6 中引入了箭头函数，该函数可以用来解决 this 的问题，因为箭头函数没有自己的 this，它使用的是包含它的函数的 this。
-- -------------------- ---- -------
--- --- - -
----- ------
------ -------- -- -
------------- -- -
------------------- - - --------- - -----
-- ------
-
--
------------ -- -- ------- -----在上面的示例代码中，我们使用箭头函数来定义 setTimeout 的回调函数，这样箭头函数就可以按照 obj 对象的 this 的值来执行了，输出了一个正确的问候语。
需要注意的是，箭头函数的 this 和普通函数的 this 工作方式不同。在普通函数中，this 的值是在运行时基于函数的执行环境动态绑定的；而箭头函数没有自己的 this，它始终指向包含它的函数的 this。
bind 方法
除了箭头函数之外，ES6 中的 bind 方法也可以用来解决 this 的问题。bind 方法可以将函数绑定到指定的 this 上。
-- -------------------- ---- -------
--- --- - -
----- ------
------ -------- -- -
------------------- -- -
------------------- - - --------- - -----
------------- ------
-
--
------------ -- -- ------- -----在上面的示例代码中，我们通过 bind 方法将 setTimeout 的回调函数绑定到 obj 对象的 this 上。这样，回调函数就可以正确地输出问候语了。
需要注意的是，在使用 bind 方法时，我们需要将当前的 this 作为参数传递给 bind 方法，并让回调函数的 this 指向绑定后的 this。
解构赋值
解构赋值也可以用来解决 this 的问题。通过使用解构赋值，我们可以将 obj 对象的 this 值传递给 setTimeout 的回调函数。
-- -------------------- ---- -------
--- --- - -
----- ------
------ -------- -- -
--- ---- - -----
------------------- -------- -
------------------- - - ---- - -----
-- ----- ------
-
--
------------ -- -- ------- -----在上面的示例代码中，我们将 obj 对象的 this 赋值给 self 变量，然后将 self 变量作为参数传递给 setTimeout 的回调函数。回调函数使用解构赋值获取了 name 属性，并将该属性的值用于输出问候语。
需要注意的是，解构赋值的变量名必须与相应对象的属性名一致，才能正常工作。
容易出错的场景
虽然 ES6 中有多种技巧来解决 this 的问题，但是在某些场景下，容易出现错误。例如，如果我们定义了一个对象，并为该对象的属性定义一个箭头函数，然后将该属性赋值给一个变量，那么该箭头函数将不再有效。
-- -------------------- ---- -------
--- --- - -
----- ------
------ -- -- -
------------------- - - --------- - -----
-
--
--- ----- - ----------
-------- -- -- ------- -----------在上面的示例代码中，我们为 obj 对象的 hello 属性定义了一个箭头函数。随后，我们将 hello 属性的值赋给了一个变量，然后调用该变量的函数。由于箭头函数的 this 始终指向包含它的函数的 this，所以该函数将输出 undefined。
总结
通过本文的介绍，我们了解到在 ES6 中解决 this 问题的技巧，包括箭头函数、bind 方法、解构赋值等。虽然这些技巧可以很好地解决 this 的问题，但是在使用时需要小心，避免出现错误。希望本文可以帮助读者更好地理解和掌握 JavaScript 中 this 的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6462e768968c7c53b03f5fb8