Why is the arrow-function "this" behavior odd? It captures it from the outer sco...

javajosh · on Nov 8, 2022

>Why is the arrow-function "this" behavior odd?

Because it behaves very differently from ordinary function "this" behavior.

Your statement about "this" being defined at the function call site is just...wrong.

int_19h · on Nov 8, 2022

It's literally how it works for arrow-less functions, though - "this" is bound to the receiver at call site:

   foo = function() { console.log(this.n); };
   o1 = { foo, n: 1 };
   o2 = { foo, n: 2 };
   o1.foo();  // 1
   o2.foo();  // 2

I can't think of any other language that does it this way. Arrow-functions, OTOH, behave as lambdas normally do:

   foo = () => { console.log(this.n); };
   o1 = { foo, n: 1 };
   o2 = { foo, n: 2 };
   o1.foo(); // undefined
   o2.foo(); // undefined

javajosh · on Nov 8, 2022

Neither of these code snippets demonstrate binding 'this' at the call site. In any event, I strongly suggest avoiding 'this' as much as humanly possible in javascript because a) it's wonky and b) you never need it.

inbx0 · on Nov 8, 2022

In the first example, when you look at the first line

  foo = function() { console.log(this.n); };

You cannot possibly know what "this" refers to when the function is eventually called. Is it some object? Is it the surrounding class or function? Is it window? Is it undefined? Is it the function itself?

There's no way to know, because it hasn't been decided yet. Deciding what `this` refers to in the "normal"/non-arrow functions is up to the caller.

  o1.foo();

Here, `this` will be o1.

  o2.foo();

here, `this` will be o2.

  o1.foo.call("hello")

here, `this` will be `new String("hello")`.

That's what the parent commenter meant by "binding this at the call site".

Classes are still very common out there, despite the popularity of e.g. React function components etc, and `this` is pretty essential with classes.

int_19h · on Nov 8, 2022

Where do you think the binding happens in my example, then?

inbx0 · on Nov 9, 2022

In line 3, where it's called

     })();

With this way of invoking, `this` will be `undefined` in "strict mode" (i.e. if the file or parent function has 'use strict' or if we are in an ES module), and Window in "sloppy mode".