箭头 function 中的“this”是否与箭头 function 之外的“var that = this”中的“that”相同？

Question

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".

Answer 1

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.