"this" returning undefined, after function call

Question

When I call one function, "this" contains all the the "stuff", but when I call a function that calls another functions, "this" returns undefined inside the second function.

Code:

class test {
  test() {
    console.log(this) // => returns class functions ect..
    this.run(this.test2);
  }
  run(func){
      func()
  }
  test2() {
    console.log(this) // => returns undefined
    this.function3(); // => ERROR
  }

  function3() {
    console.log("hey")
  }
}

var t = new test();

t.test();

Why does the code behave this way? and how do I resolve this issue

@SamH value of `this` depends how you call your function read here [this MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) — Code Maniac, Jul 11 '19 at 17:46
By passing `this.test2` as an argument to another method you've detached it from `this`. You need to reapply the `this` context to the function via `Function.prototype.call` which would look like this: `run() { func.call(this); }`. — Jake Holzinger, Jul 11 '19 at 18:32
Possible duplicate of [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — FZs, Jul 11 '19 at 20:52

score 2 · Answer 1 · answered Jul 11 '19 at 17:56

Ah, those are colled closures. The context (this) will be different, depending on from wich context the function will be called. For javascript a function is an object and it's binding to a class object is week. It can be detached from the class and used separately with on problem. That's why when you call this.someFunc() it gives you only a function, but not the function of this actual instance. The most common way to bypass it is to save an object context to a separate variable and use in istead of this. Something like that:

class test {
  var self = this;
  test() {
    console.log(self)
    this.run(self.test2);
  }
  run(func){
      func();
  }
  test2() {
    console.log(self);
    self.function3();
  }

  function3() {
    console.log("hey");
  }
}

score 1 · Answer 2 · answered Jul 11 '19 at 22:11

When the function passed into run is executed, it's this is pointing to a new execution context, not the instance of the class that you are expecting.

This can be 'solved' by binding its execution context to the instance of the class, either when passed to run, e.g.

this.run(this.test2.bind(this))

Or I'm the constructor, e.g.

constructor () {
  this.test2 = this.test2.bind(this)
}

"this" returning undefined, after function call

2 Answers2