JavaScript - this inside of timeout with arrow functions

Question

Why isn't this inside of the setTimeout equal to the object that invoked the render function when using arrow functions?

 class X {
      constructor(config) {
        this.data = config.data;
        this.render_ = config.render;
      }
      render() {
        this.render_(this.data);
      }
    }
    var x = new X({
      data: [1, 2, 3],
      render: (data) => {
        setTimeout(() => {
          console.log(this);
        }, 200);
      }
    });
    x.render();

httpNick · Accepted Answer · 2016-10-27T20:37:28.540

3

Read the part of the arrow function documentation that says "Arrow functions used as methods"

in summary: arrow functions just simply do not bind this or their own version of this, but rather references the global Window object.

edited Oct 27 '16 at 20:37

answered Oct 27 '16 at 17:55

httpNick

2,524
1
22
34

This question appears to be about `this`, not `arguments`. – Felix Kling Oct 27 '16 at 20:25
updated @FelixKling I was looking at the section above :') – httpNick Oct 27 '16 at 20:37

score 3 · Answer 2 · answered Oct 27 '16 at 17:59

Because arrow functions are lexically bound. That means they take on the value of "this" at the time of declaration. They are not affected by other means of modifying the this value, including being called as a method or functions like bind, apply and call.

function F() {
  this.type = 'F';
  this.logTypeExpression = function() {
    console.log(this.type);
  };
  this.logTypeArrow = () => {
    console.log(this.type);
  };
}

function G() {
  this.type = 'G';
}

var f = new F();
var g = new G();

f.logTypeExpression(); // F
f.logTypeArrow(); // F

// Now lets give these functions to G
g.logTypeExpression = f.logTypeExpression;
g.logTypeArrow = f.logTypeArrow;

g.logTypeExpression(); // G
g.logTypeArrow(); // F(!) (That's because `this` was assigned by the arrow function)

score 0 · Answer 3 · answered Oct 27 '16 at 18:03

0

At the time that the arrow function is created, this isn't bound to any object, so it still refers to window. Maybe you want to try console.log(x); if you want to refer to that specific instance?

answered Oct 27 '16 at 18:03

mherzig

1,528
14
26

This should be a comment, at best. The issue is that `this` does not refer to the `x` object. – Mike Cluck Oct 27 '16 at 18:04

score 0 · Answer 4 · answered Oct 27 '16 at 18:45

The code below only holds a reference to the function you created using an object literal syntax.

this.render_ = config.render;

Using bind(this) will tell the function to use the parameter object as the this reference when calling the function in the instance of your X object.

class X {
    constructor(config) {
        this.data = config.data;
        this.render_ = config.render.bind(this);
    }
    render() {
        this.render_(this.data);
    }
}

Also, it does not matter if it's an arrow function or a regular function expression in your code snippet.

JavaScript - this inside of timeout with arrow functions

4 Answers4