Is there any other elegant way to do function binding?

Question

I use ES6 class syntax, React.js and Flux for my project. This is a piece of the code:

export default class Splash extends React.Component {

  constructor() {
    super();
    this.state = Comm.reqSplash();
  }

  componentDidMount(){
    this._appReadyBound = this._appReady.bind(this);
    SplashStore.subscribe(this._appReadyBound);
  }

  //Trigger when app data is loaded, if splash is in non-intro mode then end splash
  _appReady(){
    SplashStore.unsubscribe(this._appReadyBound);
    //If intro mode, do nothing
    if (this.state.mode !== "non-intro") return;
    this.endSplash();
  }
}

As you can see, in "componentDidMount" method, I have to create a bound version of "_appReady" method.

If I don't bind with "this", "_appReady" method won't behave correctly. If I don't make a bound version, the unsubscribe method, which is the same as "removeChangeListener" if you are more familiar with it, will not do its job, which means the listener is still on the listener list.

So I'm wondering if there is an elegant way to do the binding thing, or avoid binding. Or maybe I should abandon ES6 class syntax?

possible duplicate of [can i use ES6 fat arrow in class methods?](http://stackoverflow.com/a/31368520/1048572) or [React, “this”, cloneElement and es6](http://stackoverflow.com/q/31841949/1048572)? Let me know if any of them helped you — Bergi, Sep 16 '15 at 11:55

score 1 · Answer 1 · answered Sep 16 '15 at 11:59

1

Have you tried

_appready = () => {
  //function here

}

Hope it helps

answered Sep 16 '15 at 11:59

François Richard

6,817
10
43
78

What/where is that supposed to be? – Felix Kling Sep 16 '15 at 13:40
it is supposed to replac the appready function , written es6 way with arrow wich should give the inner this scope needed. – François Richard Sep 16 '15 at 13:41
1

This is not valid ES6 though. You can't put this inside a class body. – Felix Kling Sep 16 '15 at 13:42
This would require [ES7 class properties](https://gist.github.com/jeffmo/054df782c05639da2adb) – Jonathan Sep 16 '15 at 14:04

Is there any other elegant way to do function binding?

1 Answers1