JavaScript 作用域与上下文对象详解：this、call 与 apply

JavaScript 作用域机制

所有面向对象语言都具备某种形式的作用域机制，JavaScript 也不例外。在 JavaScript 中，作用域的划分单位是函数，而非代码块（如 if、while 等语句块）。

首先通过一个简单示例来观察作用域的表现。

在 if 语句块内部，尽管变量 foo 的值被修改为“b”，但该变量实际上仍属于全局作用域，因此最终输出结果为“b”。

浏览器环境下的 JavaScript 具有一个显著特性：所有定义在全局作用域中的变量，都会成为 window 对象的属性。

参考以下代码示例：

在上述示例基础上，我们增加一个函数来尝试修改 foo 的值，具体代码如下：

这一结果可能出乎意料，但逻辑上是正确的。代码②的输出结果为“b”而非“c”。其根本原因在于作用域的限制：虽然调用了 change() 函数试图修改 foo，但此次修改仅

在函数内部的作用域中生效，并未影响全局作用域中 foo 的值。

若希望在 change() 函数内部修改全局变量 foo，可以省略变量声明语句，例如：

在 JavaScript 中，若变量未显式声明，则默认被视为全局变量。因此，调用 change() 后会成功修改全局 foo 的值，最终输出“c”。

上下文对象与 this 关键字

4、上下文对象

在 JavaScript 中，任何代码执行时都关联一个上下文对象，代码即在该对象的上下文中运行。这一上下文通过 this 变量来体现，该变量始终指向当前代码所属的对象。

全局上下文实际上对应于 window 对象的属性。

接下来通过一个示例来观察上下文对象的行为。

在此基础上，我们进一步分析另一个示例：

本例中，将 obj.hide 方法的上下文对象强制设为 window 对象，这种写法可读性较差。幸运的是，JavaScript 提供了更优的解决方案。

使用 call 和 apply 改变上下文

现在引入 call 和 apply 两个方法，它们同样可以实现上述功能。首先查看 call 方法：

通过执行 obj.hide.call(window)，我们将该函数的上下文对象更改为 window 对象。call 方法的第一个参数即指定新的上下文对象。

call 方法还支持传递额外参数，示例如下：

此外，apply 方法与 call 类似，其第一个参数同样用于指定上下文对象，但后续参数需以数组形式传递。示例如下：

最后，我们来看一个结合上下文、call 和 apply 的综合示例。

 <html> <head> <title>demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  </head> <body> <div id="abc">CssRain</div> TestTest </body> </html> 

在 setBodyColor 函数中，apply 的第二个参数是一个数组。此前我们提到 arguments 也是一个伪数组，二者能否结合使用？

将代码 changeColor.apply(document.body, ["blue"]) 修改为 changeColor.apply(document.body, arguments)，

随后向 setBodyColor() 函数传递参数，具体代码如下：

 <html> <head> <title>demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  </head> <body> <div id="abc">CssRain</div> TestTest </body> </html> 

通过上述示例，相信你对上下文的概念已有了较为清晰的认识。上下文在面向对象编程中扮演着至关重要的角色。