Javascript Object Method Inaccessible / Undefined

Question

First of all, i know there are millions of questions like this. But i could not any that helps me.

I'm calling the draw method after all images loaded. As you can see, when i try to access a variable (loadedImages, this) inside the draw method i get undefined.

Why is this happening and how can i get that variables?

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

It's precisely because of the way you call `draw`! `this.draw()` is different from `draw()`. — deceze, Jun 24 '16 at 10:47
If i do that, image object will return and there is not draw method. See: image.onload — Canser Yanbakan, Jun 24 '16 at 10:47
Try understanding the `scope` of `this` in your context. (Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) — malifa, Jun 24 '16 at 10:48

score 2 · Accepted Answer · answered Jun 24 '16 at 10:48

Store this in that and use that.draw()

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,
                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???
        }
    };
}

Javascript Object Method Inaccessible / Undefined

1 Answers1