How do I change this JavaScript to use arrow functions in order to access a property

Question

I believe this can be solved using an arrow-function, but I'm not sure how. I would like to access this.props inside of the render Function. I know I could pass it over as an argument, but would rather not. Is this possible using arrow functions? If so, what do I need to change?

class View {
  constructor(options) {
    this.options = options;
  }
  render(el, props = {}) {
    this.props = props;
    el.innerHTML = this.options.render(el);
  }
} 

var Test = new View({
  render() {
    return `${this.props.test}`
    //
    // Also, tried ${props.test} in my template literal
    //
  }
});

Test.render(document.getElementById("main"), {
    test:"123"
})

No, this is exactly *not* possible using arrow functions. You are looking for `this.options.render.call(this, el)`. — Bergi, Jun 21 '17 at 03:32
Related: [Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?](https://stackoverflow.com/q/34361379/218196) — Felix Kling, Jun 21 '17 at 04:15

score 3 · Accepted Answer · answered Jun 21 '17 at 03:23

Arrow functions allow you to access the this of the external closure, not of the calling function space. A defining point of functions is to isolate it from the callee's variables. Arrow functions simply make the context, or the this object, to be equal of it's definition closure. Thus

var that = this;
(() => console.log(that === this))();

Will print true, while

var that = this;
(function(){console.log(that === this)})();

Will print false The reason that the arrow's function can access the this context, is because its defined there, not because it's called there.

The only way to force the context object is by using Function.prototype.call or Function.prototype.apply

You rock! `this.options.render.call(this, el) does the trick. — Eric Harms, Jun 21 '17 at 03:28

score 1 · Answer 2 · answered Jun 21 '17 at 03:42

Do you need the this.props = props allocation? You could have something like this.

class View {
  
  constructor(options) {
    this.options = options;
  }

  render(el, props = {}) {
    el.innerHTML = this.options.render(props);
  }
}

var test = new View({ render: x => `${x.test}` });

test.render(document.getElementById("main"), { test:"123" });

<div id="main"></div>

How do I change this JavaScript to use arrow functions in order to access a property

2 Answers2