Как получить доступ к внешнему вызывающему абоненту в гнезде для каждого

Question

Я изучаю this из MDN. Существует функция «петли»

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 принимает 2-й из параметров, thisArgs, который устанавливает this обратного вызова, когда он выполняется ,

Таким образом, пройти текущий this как 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) 
       +")"; 
      } 
     } 
    }, this); // set thisArg to this 
}