this keyword and function scope in javascript

Question

I have the following code (simplified)

var Page = new UI('page.html');

Page.onLoad = function(html){

    this.name = 'Page 1';
    Util.test(this.run);

};

Page.run = function(){

    console.log(this.name); // undefined
    console.log(Page.name); // correct

};

var Util = function(){};

Util.prototype.test = function(callback){

    // when finished run the callback
    callback();

};

My question is why I can't use the this keyword if the execution leaves the object then comes back? Please explain what should I change to be able to access this again.

Maybe your `.run` is executed first and only than `.onLoad` that sets `this.name`? Also maybe your UI page does not bind `this` to function and it's always the function itself? — Justinas, Feb 03 '17 at 08:09
@Justinas if that was the case `Page.name` would be undefined as well, I think — slash197, Feb 03 '17 at 08:10

Mark Graham · Answer 1 · 2017-02-03T23:15:42.823

0

The top of the article references another post regarding 'this', so, I thought I'd just provide the code. If you read the other post and the articles linked within, you should be able to follow this code.

function UI(html) {
    this.name = html;
}

UI.prototype = {

    onLoad: function () {
        util.test(this);
    },

    run: function () {
        console.log(this.name);
    }
}

var util = (function () {
    return {
        test: function (ui) {
            if (ui && ui.run) {
                ui.run();
            }
        }
    }
})();

var page = new UI("index.html");

edited Feb 03 '17 at 23:15

answered Feb 03 '17 at 08:18

Mark Graham

171
6

See how `Page.run` is called: `callback();` ... – Teemu Feb 03 '17 at 08:22

score 0 · Answer 2 · answered Feb 03 '17 at 08:24

You can bind "this" to function run, like this.

Page.onLoad = function(html){

    this.name = 'Page 1';
    Util.test(this.run.bind(this));

};

You can find more information for function "bind". https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

this keyword and function scope in javascript

2 Answers2