Javascript Objekt Methode nicht zugreifbar/nicht definiert

Question

Zunächst einmal weiß ich, dass es Millionen von Fragen wie folgt gibt. Aber ich konnte mir nicht helfen.

Ich rufe die Zeichenmethode nach allen geladenen Bildern. Wie Sie sehen können, wenn ich versuche, auf eine Variable (loadedImages, this) innerhalb der Zeichenmethode zuzugreifen, werde ich undefiniert.

Warum passiert das und wie kann ich diese Variablen bekommen?

var canvas = $('#area')[0], 
    context = canvas.getContext('2d'); 

function Character() { 
    return { 
     images: ["hair.png", "head.png", "mouth.png"], 
     loadedImages: {}, 
     init: function() { 
      this.loadImages(); 
     }, 
     loadImages: function() { 
      var loaded = 0, 
       imagesLength = this.images.length, 
       draw = this.draw; 

      for(var i = 0; i <= imagesLength - 1; i++) { 
       var image = new Image(), 
        bodyPart = this.images[i]; 

       image.onload = function() { 
        loaded++; 

        if(loaded == imagesLength) { 
         draw(); 
        } 
       }; 

       image.src = 'characters/Canser/' + bodyPart; 

       this.loadedImages[bodyPart.split(".")[0]] = image; 
      } 
     }, 
     draw: function() { 
      console.log(this); // undefined??? 
     } 
    }; 
} 

var canser = new Character(); 

canser.init(); 

Answer 1

Speichern Sie diese in das und verwenden that.draw()

var Leinwand = $ ('# Fläche') [0], context = canvas.getContext ('2d');

function Character() { 
    return { 
     images: ["hair.png", "head.png", "mouth.png"], 
     loadedImages: {}, 
     init: function() { 
      this.loadImages(); 
     }, 
     loadImages: function() { 
      var loaded = 0, 
       that = this, 
       imagesLength = this.images.length, 
       draw = this.draw; 

      for(var i = 0; i <= imagesLength - 1; i++) { 
       var image = new Image(), 
        bodyPart = this.images[i]; 

       image.onload = function() { 
        loaded++; 

        if(loaded == imagesLength) { 
         that.draw(); 
        } 
       }; 

       image.src = 'characters/Canser/' + bodyPart; 

       this.loadedImages[bodyPart.split(".")[0]] = image; 
      } 
     }, 
     draw: function() { 
      console.log(this); // undefined??? 
     } 
    }; 
}