0

Is this a simple rule to remember what a this is inside of an arrow function?

var that = this;
setTimeout((a, b) => { ... }, 1000);  // the arrow function (a, b) => { ... }

and inside of that arrow function, all the this can be just viewed as the same as that.

Is this a simple rule to remember how it works?

Of course, if there is any regular ES5 function inside of the arrow function, then the this inside of that ES5 function is different from that, but will follow the old ES5 way.

Update: actually, later on, I found that one better way to think about it might be, just think of the arrow function the same as:

(function() { ... }).bind(this)

that is, the function taking away the this as it currently is, the "lexical this".

nonopolarity
  • 146,324
  • 131
  • 460
  • 740
  • Does this answer your question? [What is lexical 'this'?](https://stackoverflow.com/questions/34696686/what-is-lexical-this) – ASDFGerte Nov 21 '19 at 11:27
  • I think it should answer my question. My question here has 2 purposes: (1) to confirm what I think is true, and (2) to have a simple and correct way for me and possibly other people to remember how to think it works when I see an arrow function – nonopolarity Nov 21 '19 at 11:36

1 Answers1

2

The better way to think about the "this" in an arrow function is that it does not have a "this" variable at all, so when you reference "this" inside an arrow function, it works just like any other variable that is not yet defined in that scope such that, it goes one level up in the scope and looks for "this", if it does not find it, it goes another level up in the scope until either it finds a "this" declared or hits the top level scope.

Hence an arrow function depends on the lexical this.

Abdullah Khan
  • 2,384
  • 2
  • 22
  • 32
  • Yes, that’s exactly what happens. – Felix Kling Nov 21 '19 at 13:06
  • so the simple rule can be: "just think of `this` as any other variable" – nonopolarity Nov 21 '19 at 13:25
  • I think it is just somewhat weird behavior of `this` in different cases, so if we think of a `that`, then it provides a very concrete image of how it works and what value it is – nonopolarity Nov 21 '19 at 13:42
  • @nopole Agreed, it is indeed weird, the understanding of the behavior of "this" in various situations is one of they key points in understanding Javascript. It took me some time to wrap my head around it as well. – Abdullah Khan Nov 22 '19 at 03:30
  • @nopole "just think of this as any other variable", yes, but only in context of arrow functions, normal functions declared with "function" keyword have an existing reference to "this" so do classes (which are really just functions with sugar). – Abdullah Khan Nov 22 '19 at 03:31
  • @AbdullahKhan and being able to confirm this fact, also has the advantage of discussing with other programmers, that, "the real value of `this`, can be thought of declaring a `that` right before the arrow function, and the value of `this` will be `that`) – nonopolarity Dec 01 '19 at 10:03
  • @FelixKling @AbdullahKhan if I use https://babeljs.io/en/repl to transpile it, in fact I see a `var _this = this;` and then `_this` being used inside of the arrow function – nonopolarity Dec 13 '19 at 00:38
  • @nopole: Yes, because it's the only way to simulate resolving `this` lexically in ES5. There probably isn't a single description of this behavior that everyone will find "easy" to understand. saying that something works exactly like something I already know (variable resolution) is easier for me than introducing a new unique behavior (creating a new hidden variable and the function magically referring to that variable). – Felix Kling Dec 13 '19 at 09:48