JavaScript "this" refers to an invalid object

Question

Well, this one does not refer to the wrong object, but I do not know how to access the correct one.

function someObj() {
   this.someMethod1 = function() {
      var elementBtn = document.getElementById('myBtn');
      elementBtn.onclick = function() { 
         this.someMethod2(); //I want this.someMethod2() to be called
         //...but it tries to call elementBtn.someMethod2() i believe.
      };
   };
   this.someMethod2 = function() {
      alert('OK');
   };
}

So, when my myBtn is clicked, I want to run someObj.someMethod2 () . And I want it to be someObj , not any other someObj . But how?!

Answer 1

You may need to do this:

function someObj() {
    var that = this;

    this.someMethod1 = function() {
        var elementBtn = document.getElementById('myBtn');
        elementBtn.onclick = function() { 
            that.someMethod2();
        };
    };
    this.someMethod2 = function() {
       alert('OK');
    };
}

"which" captures the scope of the activity you are using.

Answer 2

. "this", .

:

function someObj() {
   var self = this;
   this.someMethod1 = function() {
      var elementBtn = document.getElementById('myBtn');
      elementBtn.onclick = function() { 
         self.someMethod2(); //NOTE self
      };
   };
   this.someMethod2 = function() {
      alert('OK');
   };
}

Answer 3

You can use a coffee script that has a bold arrow (used for the onclick function) to deal with similar things and compiles into well-formed javascript. Using the fat arrow, the coffee script provides the same scope as the function defined in the callback function.

play with the code here

Coffee Script

someObj = () ->
   @someMethod1 = () ->
      elementBtn = document.getElementById 'myBtn'
      elementBtn.onclick = () => 
         @someMethod2()
   this.someMethod2 = () ->
      alert 'OK'

Javascript

var someObj;
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
someObj = function() {
  this.someMethod1 = function() {
    var elementBtn;
    elementBtn = document.getElementById('myBtn');
    return elementBtn.onclick = __bind(function() {
      return this.someMethod2();
    }, this);
  };
  return this.someMethod2 = function() {
    return alert('OK');
  };
};