How to keep the 'this' context within a nested function

209
November 30, 2017, at 09:38 AM

I need to access my object prototype function within the inner function oninit. The below code does work but what I need is to have the same context as self within the init function so I can call the prototype function like this.loadData.

Please assist.

define([
    'require',
    'lodash-compat',
    'BaseWidget'
],
function (require, _, BaseWidget) {
    var Widget = function (options) {
        this.set('url', '/some/endpoint/url');  
        var self = this;

        _.assign(options, {
            oninit: function () {
                self.loadData.call(this);
            },
            oncomplete: function () {
                //do something here
            }
        });
        self.ractive = new BaseWidget(options);
    };
    Widget.prototype = {
        loadData: function () {
            var url = this.get('url');
            // my async request
        }
    };
    return {
        initRactiveWidget: function (options) {
            return new Widget(options);
        }
    };
});
Answer 1

Try binding this to the function directly. More on this https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

oninit: function () {
    this.loadData();
}.bind(this)
Answer 2

Because you are already using the variable self, your loadData will be called with the intended value of this:

oninit: function () {
    self.loadData();
}

Simplified example: notice that loadData correctly prints this.name:

var Widget = function() { 
    var self = this; 
 
    this.name  = "Christian"; 
 
    setTimeout(function() { 
        self.loadData(); 
    }, 500); 
} 
 
Widget.prototype = { 
    loadData : function() { 
        console.log(this.name); 
    } 
}; 
 
var w = new Widget();

Rent Charter Buses Company
READ ALSO
regex for numbers and slash with some spaces [on hold]

regex for numbers and slash with some spaces [on hold]

I have a problem with JS Regex, I don't understand them very wellI need a feautre which should check text and if this text match with regex it should get access to next page, but if not he will be redirected

231
Add new @keyframes animation to css

Add new @keyframes animation to css

I can not add a new animation to cssDo you know what the solution can be?

341
jQuery draggable/droppable clone and remove issues

jQuery draggable/droppable clone and remove issues

I am trying to create a simple app using jQuery UII have two divs, one is a "droppable" container, the other is a div containing three(or more) images and they are draggable

420
Fonts can not be loaded successfully in javascript which cause a “Timeout in loading fonts” [on hold]

Fonts can not be loaded successfully in javascript which cause a “Timeout in loading fonts” [on hold]

As the title said, in my project, the fonds cannot be loaded successfullyFirst, the following is the error appeared: Timeout loading fonts error fonts warning

218