JavaScript Saving this. variable inside of image.onLoad

Question

function InfoImage(path,title){
    this.path = path;
    this.title = title;
    this.color = undefined;
    this.maxPixels = undefined;

    this.init = function(){
        var canvas = document.querySelector("canvas");
        var img_Color = new Image_Processing_Color(canvas);
        var img = new Image();
        img.onload = function () {
            img_Color.init(img);
            this.color = img_Color.getDominantColor(); //this doesnt work
            this.maxPixels = img_Color.getDominantColorPixels();
        };
        img.src = path;
    };


    this.init();
}

With this example, how can i save those variables as InfoImage variable? I know that using this there will affect Image and not InfoImage...

T.J. Crowder · Accepted Answer · 2015-06-14T00:08:43.787

If I'm understanding you right, the usual answer is to use a variable to refer to this, which init then closes over:

function InfoImage(path,title){
    this.path = path;
    this.title = title;
    this.color = undefined;
    this.maxPixels = undefined;

    this.init = function(){
        var canvas = document.querySelector("canvas");
        var img_Color = new Image_Processing_Color(canvas);
        var img = new Image();
        var infoimg = this;                                         // <===

        img.onload = function () {
            img_Color.init(img);
            infoimg.color = img_Color.getDominantColor();           // <===
            infoimg.maxPixels = img_Color.getDominantColorPixels(); // <===
        };
        img.src = path;
    };
}

You can also use Function#bind:

function InfoImage(path,title){
    this.path = path;
    this.title = title;
    this.color = undefined;
    this.maxPixels = undefined;

    this.init = function(){
        var canvas = document.querySelector("canvas");
        var img_Color = new Image_Processing_Color(canvas);
        var img = new Image();

        img.onload = function () {
            img_Color.init(img);
            this.color = img_Color.getDominantColor();
            this.maxPixels = img_Color.getDominantColorPixels();
        }.bind(this);                                             // <===
        img.src = path;
    };
}

With ES6, the next version of JavaScript, you'll be able to use an arrow function, because unlike normal functions, arrow functions inherit their this value from the context in which they're defined:

function InfoImage(path,title){
    this.path = path;
    this.title = title;
    this.color = undefined;
    this.maxPixels = undefined;

    this.init = function(){
        var canvas = document.querySelector("canvas");
        var img_Color = new Image_Processing_Color(canvas);
        var img = new Image();

        img.onload = () => {                              // <===
            img_Color.init(img);
            this.color = img_Color.getDominantColor();
            this.maxPixels = img_Color.getDominantColorPixels();
        };
        img.src = path;
    };
}

Yes that is exactly what I want, thanks. – Rayden Jun 14 '15 at 00:07 — Rayden, Jun 14 '15 at 00:07

score 1 · Answer 2 · answered Jun 14 '15 at 00:05

You need the this and that pattern:

function InfoImage(path, title) {
    var _this = this;
    this.init = function(){
        var img = new Image();
        img.onload = function () {
            _this.color = img_Color.getDominantColor();
        };
    };
};

score 1 · Answer 3 · answered Jun 14 '15 at 00:08

function InfoImage(path,title){
    var self = this;

    this.path = path;
    this.title = title;
    this.color = undefined;
    this.maxPixels = undefined;

    this.init = function(){
        var canvas = document.querySelector("canvas");
        var img_Color = new Image_Processing_Color(canvas);
        var img = new Image();
        img.onload = function () {
            img_Color.init(img);
            self.color = img_Color.getDominantColor(); //this doesnt work
            self.maxPixels = img_Color.getDominantColorPixels();
        };
        img.src = path;
    };

    this.init();
}

It's that easy. this is a keyword and depends on the function's binded calling context, but it can be stored to a variable just like anything else in JavaScript.

JavaScript Saving this. variable inside of image.onLoad

3 Answers3

Linked