"This" 变为 "window" JavaScript

Question

我正在尝试开发一个小游戏，但遇到以下问题：我有一个伪 class "Cannon"，每个大炮都有一个数组，用于存储它应该守卫的区域和一个存储已进入这些保护区之一的 "intruders" 的数组。我创建了下一个函数作为 Cannon 原型的一部分：

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

当您调用 checkIntruderLeftGuardedAreas 时，绑定来自被调用方的 "this" 对象。

obj.checkIntruderLeftGuardedAreas.bind(this)(arg1, arg2, ..., argn);

在JavaScript中，这是上下文，而不是当前的class。

示例：定义一个输出"this"

的函数

function lol(){console.log(this);}

现在调用那个函数

哈哈();

然后你得到 window。

再定义一个函数，在对象中调用：

var obj = {  abc: function(){lol(); }}

然后

obj.abc();

仍然会得到你 window。
你需要

var obj = {  abc: function(){lol.bind(this)(); }}

当你调用函数时，this 上下文将变为 obj

obj.abc();

您可能必须这样做：

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;
    }).bind(this);
}

注意倒数第二行的 "bind"。

Answer 2

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

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的情况，乍一看很明显。

"This" 变为 "window" JavaScript

"This" becomes "window" JavaScript

javascript

window

this