Javascript onload event not firing inside object

Question

我試圖讓我的頭腦爲什麼這不起作用，並想知道是否有人可以幫助我。基本上我需要不同圖像的這個對象的多個實例，我需要每個對象來存儲圖像的高度/寬度爲其相關的圖像進行進一步的操作，但onload事件永遠不會觸發？

對不起，如果你看到TestTheVar函數imgW從來沒有設置任何東西，那麼你應該清楚繼承人的完整代碼。

<script type="text/javascript"> 

    (function() { 

    var myTest = new TestObj(); 
    mytest.TestTheVar(); 
    })(); 

function TestObj() { 
    this.img = new Image(); 

    this.img.onload = function(){ 
    this.imgW = this.img.width; 
    this.imgH = this.img.height; 
    }; 

    this.img.src = "reel_normal.PNG"; 
    this.TestTheVar = function() { 
    alert(this.imgW); 
    } 

} 
</script> 

Answer 1

您這裏有兩個問題

1）範圍

2）定時

範圍，在其他的答案中提到指的是事實，this內onload功能是Image對象，而不是您的TestObj，因此您需要執行以下操作：

<script type="text/javascript"> 

(function() { 

    var myTest = new TestObj(); 
    mytest.TestTheVar(); 
})(); 

function TestObj() { 
    var self = this; 
    this.img = new Image(); 

    this.img.onload = function(){ 
    self.imgW = this.width; 
    self.imgH = this.height; 
    }; 

    this.img.src = "reel_normal.PNG"; 

    this.TestTheVar = function() { 
    alert(this.imgW); 
    } 

} 
</script> 

時間是指當您嘗試訪問高度和寬度時，您無法假定圖像已完成加載。這是什麼回調是好的：

<script type="text/javascript"> 

    (function() { 

     var myTest = new TestObj(function() { 
      myTest.TestTheVar(); 
     }); 

    })(); 

function TestObj(cb) { 
    cb = cb || function() {}; 
    var self = this; 
    this.img = new Image(); 

    this.img.onload = function(){ 
    self.imgW = this.width; 
    self.imgH = this.height; 
    cb(); 
    }; 

    this.img.src = "reel_normal.PNG"; 

    this.TestTheVar = function() { 
    alert(this.imgW); 
    } 

} 
</script> 

Answer 2

this是屬於每個功能的關鍵字。

在load事件偵聽器中，它將成爲圖像，而不是您的TestObj實例。

因此，您可以

• 使用this.img.imgW得到它：

  function TestObj() { 
      var that = this; 
      this.img = new Image(); 
      this.img.onload = function(){ 
      this.imgW = this.width; 
      this.imgH = this.height; 
      that.testTheVar(); 
      }; 
      this.img.src = "reel_normal.PNG"; 
      this.testTheVar = function() { 
      alert(this.img.imgW); 
      }; 
  } 
  

• 存儲在您的TestObj例如：

  function TestObj() { 
      var that = this; 
      this.img = new Image(); 
      this.img.onload = function(){ 
      that.imgW = this.width; 
      that.imgH = this.height; 
      that.testTheVar(); 
      }; 
      this.img.src = "reel_normal.PNG"; 
      this.testTheVar = function() { 
      alert(this.imgW); 
      }; 
  } 
  

• 自定義this的事件處理中成爲你的TestObj例如：

  function TestObj() { 
      this.img = new Image(); 
      this.img.onload = (function(){ 
      this.imgW = this.img.width; 
      this.imgH = this.img.height; 
      this.testTheVar(); 
      }).bind(this); 
      this.img.src = "reel_normal.PNG"; 
      this.testTheVar = function() { 
      alert(this.imgW); 
      }; 
  }