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"; 
}