在 JavaScript 的开发中，我们经常需要将函数作为参数传递，或者将函数赋值给一个变量。但是，在某些情况下，函数可能会丢失其上下文，导致代码出现意外的错误。为了避免这种情况，可以使用 JavaScript 函数包装器中的 ".call(this)"。
".call(this)" 的含义
".call(this)" 是 JavaScript 中的一个函数调用方法，它可以改变函数内部 this 的指向。在 JavaScript 中，this 关键字通常指向函数所属的对象，但是在函数作为参数传递或者赋值给变量时，它可能会丢失上下文。当使用 ".call(this)" 调用函数时，this 将指向当前执行上下文中的 this 对象，从而避免了上下文丢失的问题。
使用 ".call(this)" 的场景
在构造函数中使用
当我们使用构造函数创建实例时，可以使用 ".call(this)" 来确保该实例具有正确的上下文。例如：
-------- ------------ ---- - --------- - ----- -------- - ---- - -------- ------------- ---- ------ - ----------------- ----- ----- ---------- - ------ -
在上面的例子中，Student 继承了 Person 的属性，并确保了每个实例都具有正确的上下文。
在继承中使用
当我们需要从一个对象继承方法时，可以使用 ".call(this)" 来确保方法具有正确的上下文。例如：
--- ------ - -
----- ------
---- ---
--------- ---------- -
------------------- -- ---- -- - - -----------
-
--
--- ------- - -
------ ---
--
------------------------------ -- --------- -- ---- -- ---在上面的例子中，student 对象调用了 person 对象的 sayHello 方法，并确保了该方法具有正确的上下文。
使用示例
假设我们有一个计算器对象，它包含两个属性（num1 和 num2）和两个方法（add 和 subtract）。我们可以使用以下代码来创建该对象：
--- ---------- - -
----- --
----- --
---- ---------- -
------ --------- - ----------
--
--------- ---------- -
------ --------- - ----------
-
--但是，由于 JavaScript 中函数的 this 上下文可能会发生变化，我们不能确保在每个情况下都能正确地调用这些方法。为了避免这种情况，我们可以使用 ".call(this)" 来确保方法具有正确的上下文。例如：
--- ---------- - -
----- --
----- --
---- ---------- -
------ --------- - ----------
--
--------- ---------- -
------ --------- - ----------
-
--
-------- -------------------- ----- ----- -
--------------- - -----
--------------- - -----
------ ---------------------------
-
------------------------- -- --- -- ----
------------------------------ -- --- -- ----在上面的例子中，我们使用了 ".call(this)" 来确保 add 和 subtract 方法具有正确的上下文，并且可以正确地计算结果。
总结
JavaScript 函数包装器中的 ".call(this)" 可以避免函数上下文丢失的问题，对于构造函数、继承和方法调用等情况都非常有用。如果您在 JavaScript 中遇到了上下文丢失的问题，不妨尝试使用 ".call(this)" 来解决它们。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28624