image.onload в метод

Question

Итак, я пытался заставить предварительный загрузчик изображений работать, поскольку я понял, что мне нужно загрузить изображения, прежде чем я смогу нарисовать их на холсте. Я следовал этому описанию: How do image preloaders work?, но я не уверен, как сделать img.onload в методе или каким-то образом сделать обходной путь, поскольку функция не может получить доступ к переменным, к которым это должно быть.

Вот мой код. Класс холста не включен, поскольку он не имеет значения. Спасибо заранее.

window.onload = function() { 
     var MyApp = new App(); 
     MyApp.Initialize(); 
    } 
    class App { 
     canvas: Canvas; 
     imageURLs: string[] = []; 
     images = []; 
     imagePreLoader: ImagePreLoader; 
     constructor() { 
      this.canvas = new Canvas(window.innerWidth, window.innerHeight, "mainCanvas"); 
      this.ImagePreLoader = new ImagePreLoader(this.imageURLs, this.images); 
     } 
     Initialize() { 
      this.imageURLs.push("0.png"); 
      this.imageURLs.push("1.png"); 
      this.imagePreLoader.startLoadingAllImages(this.Loop.bind(this)); 
     } 
     Loop() { 
      this.canvas.clear(); 
      this.Draw(); 
      requestAnimationFrame(this.Loop.bind(this)); 
     } 
     Draw() { 
      for (var i = 0; i < this.images.length; i++) { 
       this.canvas.drawImage(this.images[i], i * 100, 100); 
      } 
     } 
    } 
    class ImagePreLoader { 
     imagesLoaded = 0; 
     imageURLs: string[]; 
     images; 
     constructor(urlArray: string[], imageArray) { 
      this.imageURLs = urlArray; 
      this.images = imageArray; 
     } 
     startLoadingAllImages(callback): void { 
      for (var i = 0; i < this.imageURLs.length; i++) { 
       var img = new Image(); 
       this.images.push(img); 
       img.onload = function() { //This doesn't work as the function can't access the variables of the class. 
        this.imagesLoaded++; 
        if (this.imagesLoaded >= this.imageURLs.length) { 
         callback(); 
        } 
       } 
       img.src = this.imageURLs[i]; 
      } 
     } 
    } 

Answer 1

Изменение:

img.onload = function() { //This doesn't work as the function can't access the variables of the class. 
    this.imagesLoaded++; 
    if (this.imagesLoaded >= imageURLs.length) { 
     callback(); 
    } 
} 

к:

img.onload =() => { 
    this.imagesLoaded++; 
    if (this.imagesLoaded >= imageURLs.length) { 
     callback(); 
    } 
} 

с использованием лямбда, т.е. () => { ... }, делает работу на this ключевое слово, как ожидается, в этой ситуации. A function получит свой объем (this) от вызывающего абонента, который в этом случае будет иметь дефектную область.