How to bind all methods of a class to the 'this' variable in javascript [closed]

Question

I have a class in JavaScript (MyClass) which exposes two public functions (funA and funB) as shown:

var MyClass = function(){
  this.funA = function(){
    console.log("function A");
    this.funB();
  };
  this.funB = function(){
    console.log("function B");
  };
};

var myObj = new MyClass();

Note how funA calls funB using 'this' keyword.

The following works:

myObj.funA();

But this does not:

var anonymousFun = function(fn){
  fn();
}
anonymousFun(myObj.funA);

The reason is when funA calls funB using 'this', the 'this' is set to global context (instead of MyClass) and funB does not exist at global level. The error is:

Uncaught TypeError: this.funB is not a function

The simplest solution that I tried to avoid the issue is to use a variable 'that' inside MyClass and initialize it to 'this'. Then, use that.funB instead of this.funB inside funA:

var MyClass = function(){
  var that = this;
  this.funA = function(){
    console.log("function A");
    that.funB();
  };
  this.funB = function(){
    console.log("function B");
  };
};

Is this a correct approach? Are there any better solutions available?

Answer 1

If you're compiling your JS with Babel you can use class property initilizer syntax to create functions that are bound to this:

class MyClass {
  funA = () => {
    console.log('function A')
    this.funB()
  }

  funB = () => {
    console.log('function B')
  }
}

Answer 2

You can use the Function.bind method to attach an object which is to be used as "this" when the function is called.

anonymousFun(myObj.funA.bind(myObj));