如何訪問嵌套forEach外部呼叫者

Question

我正在學習從MDN this。 有一個函數「環」

function loop(){ 
    ctx.fillStyle='rgb(255,200,124,.35)'; 
    ctx.fillRect(0,0,width,height); 

    while(balls.length<15){ 
     var ball = new Ball(); 
     balls.push(ball); 
    } 

    balls.forEach(function(b){ 
     b.draw(); 
     b.update(); 
     b.collisionDetect(); 
    }); 

    requestAnimationFrame(loop); 
} 

balls是一個數組，並且在collisionDetect()有另一種用途的forEach如下。我要讓this在collisionDetect()指呼叫者b在loop()

Ball.prototype.collisionDetect = function(){ 

    balls.forEach(function(bl){ 

     if(!(this.x===bl.x&&this.y==bl.y 
      &&this.velX===bl.velX&&this.velY===bl.velY)){ 
      var dx = this.x-bl.x; 
      var dy = this.y-bl.y; 
      var distance = Math.sqrt(dx*dx+dy*dy); 

      if(distance<this.size+bl.size){ 
       bl.color = this.color = "rbg(" 
       + random(0,255) 
       +"," 
       +random(0,255) 
       +"," 
       +random(0,255) 
       +")"; 
      } 
     } 
    }); 
} 

我試圖通過b作爲collisionDetect()參數。它確實有效，但不是預期的。

我知道兩個forEach可以簡單地換成原來的for循環，但我只是想知道我是否可以使它與forEach一起工作。

非常感謝大家。

Answer 1

您可以將局部變量綁定到this。

Ball.prototype.collisionDetect = function(){ 
    var self = this; 
    balls.forEach(function(bl){ 

     if(!(self.x===bl.x&&self.y==bl.y 
      &&self.velX===bl.velX&&self.velY===bl.velY)){ 
      var dx = self.x-bl.x; 
      var dy = self.y-bl.y; 
      var distance = Math.sqrt(dx*dx+dy*dy); 

      if(distance<self.size+bl.size){ 
       bl.color = this.color = "rgb(" + random(0,255) +"," +random(0,255) +"," +random(0,255) +")"; 
      } 
     } 
    }); 
} 

另一種方法是使用ES6箭頭函數，因爲它們保留了this。

Ball.prototype.collisionDetect = function(){ 

    balls.forEach(b1 => { 

     if(!(this.x===bl.x&&this.y==bl.y 
      &&this.velX===bl.velX&&this.velY===bl.velY)){ 
      var dx = this.x-bl.x; 
      var dy = this.y-bl.y; 
      var distance = Math.sqrt(dx*dx+dy*dy); 

      if(distance<this.size+bl.size){ 
       bl.color = this.color = "rbg(" + random(0,255) +"," +random(0,255) +"," +random(0,255) +")"; 
      } 
     } 
    }); 
} 

Answer 2

您可以將函數綁定到您想要的任何上下文/範圍。這樣，它會工作：

Ball.prototype.collisionDetect = function(){ 

balls.forEach(function(bl){ 

    if(!(this.x===bl.x&&this.y==bl.y 
     &&this.velX===bl.velX&&this.velY===bl.velY)){ 
     var dx = this.x-bl.x; 
     var dy = this.y-bl.y; 
     var distance = Math.sqrt(dx*dx+dy*dy); 

     if(distance<this.size+bl.size){ 
      bl.color = this.color = "rbg(" 
      + random(0,255) 
      +"," 
      +random(0,255) 
      +"," 
      +random(0,255) 
      +")"; 
     } 
    } 
}.bind(this)); 
} 

Answer 3

這是Array#forEach簽名：

arr.forEach(callback[, thisArg]) 

正如你所看到的，Array#forEach接受第二PARAM，thisArgs，當它執行它設置回調this 。

所以，傳遞當前this作爲第二PARAM，並且將被分配到所述回調：

Ball.prototype.collisionDetect = function(){ 

    balls.forEach(function(bl){ 

     if(!(this.x===bl.x&&this.y==bl.y 
      &&this.velX===bl.velX&&this.velY===bl.velY)){ 
      var dx = this.x-bl.x; 
      var dy = this.y-bl.y; 
      var distance = Math.sqrt(dx*dx+dy*dy); 

      if(distance<this.size+bl.size){ 
       bl.color = this.color = "rbg(" 
       + random(0,255) 
       +"," 
       +random(0,255) 
       +"," 
       +random(0,255) 
       +")"; 
      } 
     } 
    }, this); // set thisArg to this 
}