javascript函数中的这个函数

Question

我正在尝试使用这个函数。在创建对象的函数内部。但它似乎没有工作。

function enemy(x, y) { 
     this.x = x; 
     this.y = y; 
     this.width = 32; 
     this.height = 32; 
     this.img = new Image(); 
     this.ready = false; 
     this.img.onload = function() { 
      this.ready = true; 
     } 
     this.img.src = "images/barney.png"; 
    } 

this.ready从未设置为true，我需要这样才能渲染图像。有任何想法吗？

Answer 1

this不再指向同一个对象，因为它是第一个功能，尽量分配var self = this：

function enemy(x, y) { 
     this.x = x; 
     this.y = y; 
     this.width = 32; 
     this.height = 32; 
     this.img = new Image(); 
     this.ready = false; 
     var self = this; // note here how we save the value of `this` 
     this.img.onload = function() { 
      self.ready = true; // and use that saved `this` here 
     } 
     this.img.src = "images/barney.png"; 
    } 

你需要这样做，因为this变化值，当你的onload内方法。

由于@JamesMcLaughlin低于所指出的，另一种解决方案，如果你使用ECMA6（和谐的Javascript），你可以保持相同的值this如果您使用箭头函数语法：

function enemy(x, y) { 
     this.x = x; 
     this.y = y; 
     this.width = 32; 
     this.height = 32; 
     this.img = new Image(); 
     this.ready = false; 
     this.img.onload =() => this.ready = true; 
     this.img.src = "images/barney.png"; 
    } 

Answer 2

你应该接受另一个答案，但我会张贴这个以备将来参考。如果您的目标是ES6，则可以使用胖箭头：

function enemy(x, y) { 
    this.x = x; 
    this.y = y; 
    this.width = 32; 
    this.height = 32; 
    this.img = new Image(); 
    this.ready = false; 
    this.img.onload =() => { 
     this.ready = true; 
    } 
    this.img.src = "images/barney.png"; 
}