`this` is undefined when calling method from another context

Question

This is my first time creating OOP for JS. I followed some tutorials but I can't wrap my head around this issue. I know the problem, but i dont know the solution

function NewApp(name){
    this.name = name;
    this.currentPage = 1;
    this.customObjectWithMethods = //init with options and so on
}

NewApp.prototype.logic = function(){
// Note 1.  
    var app = this
    //Note 3.
    this.customObjectWithMethods.method{
        if(app.currentpage < 3)
            // Note 2.  
            app.navigate(app.logic)
    }
}

NewApp.prototype.navigate = function(sender){
    var app = this;
    this.customObjectWithMethods.method{
        app.currentpage++;
        this.method(function() {
            return app.currentPage === 2;
        }, sender(), this.terminate);
    } 
}

• Note 1: I need to create a reference because after that, this doesn't work anymore to refer to the current object.
• Note 2: After the check I want to do some logic in another method and repeat the current function, but when the function runs again it breaks on the method ( this.customObjectWithMethods ) because this doesn't exists.
• Note 3: This is where it breaks because "this" works the first time not the second time.

It gets very complicated like this with the this -keyword, which makes me think that my design may be flawed.

Is there any solution for this problem, or should I refactor it ?

Answer 1

Some syntax errors & style issues - here is a short correction

var myFunction = function(){
    //code here
};

var mySecondFunction = function(){
    //code here
};

function NewApp(name){
this.name = name;
this.currentPage = 1;
this.customObjectWithMethods = function(){}; //empty function so calling doesnt resolve in error

}

NewApp.prototype.logic = function(){

   this.customObjectWithMethods.method = mySecondFunction.bind(this);
}

NewApp.prototype.navigate = function(sender){

    this.customObjectWithMethods.method = myFunction.bind(this);

}

I have moved the 2 functions outside of the constructor Function so they dont get recreated every time you call the constructor functions.

with _.bind(this) the "this"-reference gets passed into the scope of your functions (i think this is more pretty than creating another var).

with

var reff = new NewApp('namename');

you can get started calling your functions now:

ref.logic(); 

maybe this approach works for you?

Answer 2

Surely it will become complicated, this keyword doesn't always refer to the main object but to the scope where it is used, take a look at Scope and this in JavaScript for further information.

This is your way to go, make a variable that contains your constructor and add these two methods to this variable, after that you can call your functions:

var newApp = function newApp(name){
    this.name = name;
    this.currentPage = 1;

    //Make a reference to your object here
    var THIS = this;

    this.logic = function(){ 
        var sender = this;

        THIS.customObjectWithMethods.method = function(){
            if(THIS.currentpage < 3) 
                THIS.navigate(sender);
        }
    }

    this.navigate = function(sender){
        this.customObjectWithMethods.method = function(){
            THIS.currentpage++;
            this.method(function() {
                return THIS.currentPage === 2;
            }, sender(), this.terminate);
        } 
    }    

}

And this is how to use your constructor and its methods:

var app = newApp("Test");

//Call the first method
app.customObjectWithMethods();

//Thenn call the second one
app.logic();