Accessing 'this' context in iffe

Question

Say i have a javascript class with a method, foo(). In another method, f.e componentDidMount, i want to access method foo() inside an iffe. How do i bind the 'this' context to be available inside the iffe?

I know i can this = self and use that, or use arrow syntax, but i would like to expand my knowledge of js & this, and thus do it with a proper binding. I've tried:

(function doSomething() {
  this.foo();
}.bind(this)())

But that doesn't work. Example code:

class Test extends React.Component {
  constructor(props) {}

  public componentDidMount() {
    (function doSomething() {
      this.foo();
    })();
  }

  foo() {
    // ...
  }
}

@Seblor please read the question. "*I know i can use arrow syntax*, but i would like to expand my knowledge of js & this, and thus do it with a proper binding." — Roberto Zvjerković, Mar 12 '19 at 10:58
[Your first snippet works](https://codesandbox.io/s/x510l04jq). — Tholle, Mar 12 '19 at 10:58
..dang you are right. Tslint complaining is the problem here, not the actual code. Sorry — Flimzy_Programmer, Mar 12 '19 at 11:00

score 2 · Accepted Answer · answered Mar 12 '19 at 11:01

If you can't or don't want to use arrow functions, you can do the binding of your function to the outside context manually:

(function doSomething() {
  this.foo();
}.bind(this))();

The logic behind this keyword in javascript is discussed in detail in this question: How does the "this" keyword work? Or in this amazing book by Kyle Simpson: YDKJS: this & object prototypes

score 0 · Answer 2 · answered Mar 12 '19 at 11:00

0

Common pattern with iife is to use function arguments

class Test extends React.Component {
  constructor(props) {}

  public componentDidMount() {
    (function doSomething(self) {
      self.foo();
    })(this);
  }

  foo() {
    // ...
  }
}

answered Mar 12 '19 at 11:00

Pavel Kratochvil

452
2
9

Accessing 'this' context in iffe

2 Answers2