在 JavaScript 中，this 关键字是一个常见且重要的概念。虽然经常被用到，但很多开发人员对它的应用还是不够自信或并不完全了解其原理。本文将从基础到深入，解释 this 的概念和应用，让开发人员能够更好地理解和掌握其使用。
什么是 this？
简单地说，this 在 JavaScript 中表示当前对象。但是，在函数代码块内，this 的值往往会随着不同的代码环境而不同，这让理解 this 的应用变得更加重要。
全局 this
在全局范围内，this 总是指向 全局对象，即 window 对象，如下例所示：
console.log(this); // window
函数 this
在函数中，this 的值很容易受到所处代码环境的影响。默认情况下，this 指向的是 调用该函数的对象。但是如果没有显式指定该对象，则默认指向 全局对象。例如：
-- -------------------- ---- ------- -------- ----------- - ----------------------- - --- ---- - - ----- ------ ------ --------- - --- ---- - - ----- -------- ------ --------- - ------------- -- -- ----- ------------- -- -- ------- --- ----- - ----------- -------- -- -- ----------------- ---- ------ ------
假如需要指定 this 的取值，我们可以使用 call(), apply(), 或者 bind() 方法。
构造函数 this
另一个需要注意的地方是 this 在构造函数中的应用。在 new 操作符实例化构造函数时，this 就指向了新创建的 实例对象。例如：
-- -------------------- ---- -------
-------- ------------ ---- -
--------- - -----
-------- - ----
---------- - ---------- -
---------------- -- ---- -- ------------- --- - -- ----------- ----- ------
-
-
--- -- - --- ------------- ----
----------- -- -- ---- -- ---- -- ---- --- - -- -- ----- ----解决 this 变量
一般来说，由于 this 在不同代码块内取值不同，我们需要了解以下几种场景和对应的解决方案。
1. 使用箭头函数
箭头函数的 this 始终指向其定义时的 对象，不受其上下文变化的影响。因此，当需要在函数内部保持外部变量的值时，可以使用箭头函数。例如：
-- -------------------- ---- -------
--- --- - -
----- ------
------ ---------- -
------------- -- -
-----------------------
-- ------
-
-
------------ -- -- ---------- -- -2. 使用 call(), apply(), 或 bind()
call() 和 apply() 方法可以在指定的 上下文 中调用函数，并可显式设置 this 的值。例如：
-- -------------------- ---- ------- --- ---- - -------- ------------ -------- --------- - ----------------------- -- --------------------------- - --- ---- - - ----- ----- - --- ---- - - ----- ------- - -- -------------- ------------------- -- -- ----- ------------------- -- -- ------- ------------------- -- -- -------
bind() 方法也可以用于设置 this 值，不同之处在于它不会立即调用函数，而是返回一个修改过 this 值的新函数。例如：
-- -------------------- ---- -------
--- ---- - -
----- ------
---------- ---------- -
-----------------------
-
-
--- ---- - - ----- ------- -
----------------- -- -- -----
--- ----------- - --------------------------
-------------- -- -- -------3. 使用 self 或 that
由于 this 变量在事件处理程序中的问题，通常会使用 self 或 that 来保存对 this 的引用。例如：
-- -------------------- ---- -------
--- --- - -
----- ------
---- ---------- -
--- ---- - ----- -------------------------
-------------------------------- ---------- -
----------------------- -----------------------------------------
---
-
-总结
在JavaScript中，this 是一个很有用的关键字。通过使用 call()、apply()、bind() 等方法，以及了解箭头函数的用法，将有助于更好地掌握 this 的概念。无论是新手还是有经验的开发人员，这些技巧都可以帮助您更轻松地编写代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a8b8e448841e989451c185