深入解析JavaScript中this指向与常见Bug修复

JavaScript中this的基本概念

在JavaScript语言中，this关键字所代表的上下文环境往往显得复杂多变，这经常导致开发者在排查bug时感到困惑。实际上，只要理清不同情境下this的执行逻辑，问题便迎刃而解。以下是关于这一机制的详细梳理。

JavaScript中存在一个既特殊又常用，却常令初学者头疼的概念——“this”。本文将深入探讨这一核心概念。

通常情况下，this会指向某个特定的对象，但其具体指向会随上下文环境的不同而动态变化。通过几个典型场景的分析，我们可以更透彻地理解this的行为机制。

全局环境下的this指向

全局对象（window object）

我们在三种不同情境下打印this的值：一是在函数最外层（outer environment）直接执行；二是使用function statement（函数声明）执行；三是使用function expression（函数表达式）执行。若对函数声明与函数表达式的区别尚不明确，可参考相关注脚。

运行结果显示，这三种情境下的this均指向同一对象，即全局环境中的window object（全局对象）。

这意味着，我们可以直接利用function和this在全局对象中创建新的属性。

在此处，我们利用this.NewVariable = "..."在全局对象中创建新属性。函数执行完毕后，我们可以直接通过console.log(NewVariable)进行打印。之所以无需使用this.NewVariable或window.NewVariable，是因为任何位于global object（即window）中的属性，均可直接访问，无需使用点号操作符。

运行结果如下所示：

控制台将打印出“Create a new property”，同时在window这个大对象中，也能找到NewVariable这一属性。

对象方法中的this行为

对象中的方法（method in object）

在JavaScript中，若对象内的值是原始类型（primitive type，如字符串、数值、布尔值），我们将其称为“属性（property）”；若对象内的值是函数（function），则将其称为“方法（method）”。

接下来，我们将构建一个方法示例。

首先，利用object literal（对象字面量）方式创建一个对象c，其中包含属性name和方法log。log是一个匿名函数（anonymous function），其内容仅打印this（关于匿名函数详见注脚）。最后，通过c.log()的方式执行该方法。

此时，this的指向结果如何？

答案是对象c。

当函数作为对象内的method被调用时，this指向包含该method的对象。

嵌套函数中的this Bug解析

JavaScript中关于this的一个典型Bug

让我们进一步延伸分析该示例。

假设我们在method log内部增加一行代码this.name = "Updated Object C name"。

鉴于此时this指向对象c，我们可以推断，执行该method时，它会修改c.name的值。

这部分逻辑看似没有问题，但请继续往下看。

假设我们在method log内部进行变更，在log方法内另建一个名为setname的函数，同样采用this.name = newname的方式修改对象c中name属性的值。

接着执行setname函数，旨在将对象c中name的属性值修改为“New name for object c”，最后打印this以观察结果。

结果发现，对象c中name属性的值并未变为“New name for object c”，依然保持不变！这是为何？

仔细检查，回顾我们的window object，会发现window object中新增了一个名为“name”的属性，且其值为“New name for object c”。

这意味着什么？这表明在函数setname内部，this指向的是global object（即window object），而非之前的对象c。

我们在setname这个function中，通过console.log(this)进行验证：

在log这个method中，我们共执行了三次console.log(this)，结果如下：

第一个和第三个this指向对象c，而第二个位于setname内部的this，则指向window object（全局对象）。这正是setname函数无法修改对象c中name属性的原因，因为此时的this并未指向对象c。

许多人将此现象视为JavaScript的一个Bug。

修复this指向错误的方案

那么我们可以怎么做？

面对上述示例，我们应采取何种措施来避免指向不同的对象？

许多人的解决方案如下：由于我们知道对象是通过引用方式传递的，因此可以这样做。

步骤1

在整个函数的最上方添加一行代码var self = this（部分开发者会使用var that = this）。基于引用的特性，self和this将指向同一对象。既然this指向对象c，那么self也将指向对象c。

步骤2

随后，将方法log内部原本使用的this全部替换为self。此举可确保self始终指向c对象，从而避免如前例所示的指向错误问题。

结果符合预期，在第二次console.log(self)时，成功替换了对象c中name属性的值。

总结与最佳实践

总结

让我们总结如下：

若在全局环境中创建函数并打印this，此时this将指向全局对象，即window对象。

若在对象内部创建函数（即方法场景），此时this通常指向包含该方法的对象（之所以强调“通常”，是因为存在上述Bug的特殊情况）。

当遇到method内部this指向不明确的情况时，为避免不必要的错误，建议在method最上方建立一个变量，将其指定为this（即var self = this）。

若仍不确定特定情境下this的指向，可通过console.log()直接输出查看。

示例代码

// function statement
function a(){
 console.log(this);
 this.NewVariable = "Create a new property";
}
a();
console.log(NewVariable);
var c = {
 name:"The C object",
 log: function(){
 var self = this;
 self.name = "Updated object C name";
 console.log(self);
 
 var setname = function(newname){
  self.name = newname;
  console.log(self);
 }
 setname("New name for object c");
 console.log(self)
 }
}
c.log();