javascript - "This"变成 "window"JavaScript

Question

我正在尝试开发一个小游戏，但我遇到了以下问题:我有一个伪类“Cannon”，每个 Cannon 都有一个存储它应该守卫的区域的数组和一个存储“入侵者”的数组进入其中一个戒备区。我创建了下一个函数作为 Cannon 原型(prototype)的一部分:

Cannon.prototype.checkIntruderLeftGuardedAreas = function(){
    debugger;
    this.intruders = this.intruders.filter(function(intruder){
        for(var i = 0, l = this.guardedAreas.length; i < l; i ++)
        {
            if(intruder.inInsideGuardedArea(this.guardedAreas[i]))
            {
                return true;
            }
        }
        return false;
    });
}

在第三行我试图过滤那些离开保护区的入侵者，但“this”引用“window”而不是调用该函数的 Cannon objetc。

我也试过这段代码:

var intrudersArray = [];
    for(var i = 0, l = this.guardedAreas.length; i < l; i ++)
        {
            for(var j = 0, k = this.intruders.length; j < k; j++)
            {
               if(this.intruders[j].inInsideGuardedArea(this.guardedAreas[i]))
               {
                   intrudersArray.push(this.intruders[j]);
               }
            }

        }

        this.intruders = intrudersArray;

根据我的逻辑，这与前面的代码块做了同样的事情:过滤入侵者数组。问题是在“if”开始的第 6 行，突然“this”引用了“window”!。在达到 if 条件之前，“this”引用调用该函数的 Cannon 对象。

Answer 1

是的，范围界定可能会很棘手，您可以尝试以下操作:

Cannon.prototype.checkIntruderLeftGuardedAreas = function(){
    var self = this;

    self.intruders = self.intruders.filter(function(intruder){
        for(var i = 0, l = self.guardedAreas.length; i < l; i ++)
        {
            if(intruder.inInsideGuardedArea(self.guardedAreas[i]))
            {
                return true;
            }
        }
        return false;
    });
}

注意 var self = this; 行。它的目的是保存对 cannon 实例的引用以在嵌套回调中使用(注意 this 现在是 self 在 filter 中)以避免范围问题，在 jQuery 代码中经常看到这样的东西。

这种做法确保你引用你的大炮而不需要跟踪this发生了什么，self乍一看很明显.