Properly package JS code without having to worry about "this"

Question

I have some JS code, and want to package it so that it is easy to use. I had this:

var myID = {
windowref : undefined,
intervalID : null,
 checkLogin : function(){
    if (this.windowref==undefined){
        console.log(windowref)
        console.log("no ref yet")
        return false;
    }
    if (this.windowref.closed){
        console.log("window closed")
        clearInterval(this.intervalID)
        this.intervalID=null
    }
    if (this.windowref.location.href=='mycallbackurl'){
        console.log("login detected")
        clearInterval(this.intervalID)
        this.intervalID=null
        this.windowref.close()
    }
},
login_process: function(){
    this.windowref = window.open('oneURL',
        "login with MY ID","width=600, height=400")
    console.log(self)
    if (this.windowref!=null){
        this.intervalID =  setInterval(this.checkLogin,500)
    }
}
}

when I tried to use it like so :

$(document).ready(function(){
   $('a#login_push').on("click",myID.login_process.bind(myID)); 
});

I got issues with 'this' not being in the proper scope ( was scoped to the element returned by jquery. I changed it to :

var myID = {
    windowref : undefined,
    intervalID : null,
     checkLogin : function(){
        if (this.windowref==undefined){
            return false;
        }
        if (this.windowref.closed){
            console.log("window closed")
            clearInterval(this.intervalID)
            this.intervalID=null
        }
        if (this.windowref.location.href=='mycallbackurl'){
            console.log("login detected")
            clearInterval(this.intervalID)
            this.intervalID=null
            this.windowref.close()
        }
    },
    login_process: function(){
        this.windowref = window.open('myloginurl',
            "login with my ID","width=600, height=400")
        if (this.windowref!=null){
            this.intervalID =  setInterval(this.checkLogin.bind(myID),500)
        }
    }
}

this works if I also bind when setting the event handler:

$(document).ready(function(){
   $('a#login_push').on("click",myID.login_process.bind(myID)); 
});

Is there a "proper" way to write this so that I could package this in a sort of "SDK" and the developers would only need to do something of the sort:

 $(document).ready(function(){
       $('a#login_push').on("click",myID.login_process); 
    });

I tried setting self to this in the object literal, and then using self instead of this, but it did not work.

Answer 1

As mentioned in the comments, you could use myID instead of this. Another way is to export a bound version of the function:

myID.login_process = function () {
    // ...
}.bind(myID);