ES6 avoid that/self

Question

I am trying to avoid "const that = this", "const self = this" etc. using es6. However I am struggling with some constructs in combination of vue js and highcharts where you got something like this:

data () {
  let that = this
  return {
    highchartsConfiguration: {
      ... big configuration ...
      formatter: function () {
        return this.point.y + that.unit
      }
    }
  }
}

I'd like to have the that defined just in formatter object if possible. Using arrow syntax () => {} would me allow to use this from data scope, but i would lose the power of giving the function an extra scope.

I do not want to modify the used libraries.

you could make use of `.bind(this)` like `function () { return this.point.y + that.unit }.bind(this)` or arrow functions like ` () => { return this.point.y + that.unit }` , — Shubham Khatri, Dec 05 '17 at 18:41
You could also just not use the classes as defined by the language. As Douglas Crockford said "The ECMA team had a thousand ways to implement classes in JavaScript. They picked one that was worse than any of those." — krillgar, Dec 05 '17 at 18:42
@ShubhamKhatri bind does change the context as far as I know. I use .bind(this), then it would be same as () => { }. It does not really help, because I need both. I was looking for something like function (that = this) { return that.unit + this.point.y}, which does not work unfortunately. — user1497119, Dec 05 '17 at 19:34

Estus Flask · Answer 1 · 2017-12-05T21:22:21.607

The example illustrates the problem that persists in older libraries like Highcharts and D3 that emerged before current JS OOP practices and strongly rely on dynamic this context to pass data to callback functions. The problem results from the fact that data is not replicated as callback parameters, like it is usually done in vanilla JS event handlers or jQuery callbacks.

It is expected that one of this contexts (either lexical or dynamic) is chosen, and another one is assigned to a variable.

So

const that = this;

is most common and simple way to overcome the problem.

However, it's not practical if lexical this is conventionally used, or if a callback is class method that is bound to class instance as this context. In this case this can be specified by a developer, and callback signature is changed to accept dynamic this context as first argument.

This is achieved with simple wrapper function that should be applied to old-fashioned callbacks:

function contextWrapper(fn) {
    const self = this;

    return function (...args) {
        return fn.call(self, this, ...args);
    }
}

For lexical this:

data () {
  return {
    highchartsConfiguration: {
      formatter: contextWrapper((context) => {
        // `this` is lexical, other class members can be reached
        return context.point.y + this.unit
      })
    }
  }
}

Or for class instance as this:

...

constructor() {
  this.formatterCallback = this.formatterCallback.bind(this);
}

formatterCallback(context) {
    // `this` is class instance, other class members can be reached
    return context.point.y + this.unit
  }
}

data () {
  return {
    highchartsConfiguration: {
      formatter: contextWrapper(this.formatterCallback)
    }
  }
}

score 1 · Accepted Answer · answered Dec 05 '17 at 18:47

1

If you need the this that the formatter method is called on, there is no way around an extra variable (that, self, whatever).

answered Dec 05 '17 at 18:47

Bergi

630,263
148
957
1,375

I know that I will need an extra variable. I just want to declare it directly at the function and not hundreds of lines away. I was hoping for a shortcut like formatter: function (that = this) { return that.unit + this.point.y} ... thinking of it.. it might just work, will try it. Not yet sure about sideeffects. – user1497119 Dec 05 '17 at 19:08
@user1497119 The side effect is that you're limited to `that = this` recipe, e.g. you cannot define `highchartsConfiguration` as class field in ES.next. Also context juggling makes the code harder to read. – Estus Flask Dec 05 '17 at 20:38
1

@user1497119 You can always create the `formatter` function from an IEFE to declare `that` maximally close at its definition, e.g. `formatter: (that => function(…) { … this … })(this)` – Bergi Dec 05 '17 at 21:52
@Bergi that was exactly I was looking for. – user1497119 Dec 06 '17 at 12:46

ES6 avoid that/self

2 Answers2

Linked