Javascript onload event не срабатывает внутри объекта

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