#304 Creo que no entiendo la situación o el código del todo bien, o que se habló de distintas cosas.
Efectivamente, como dices, se imprime la referencia a la función (en Chrome, por ej, tu código loggea algo tal que xx () => ´${this}´
).
Por otro lado, si se ejecutara esa función:
console.log("xx", (() => `${this}`)())
loggearía:
xx [object Window]
En cuyo caso el this
no es una referencia al propio closure, si no al scope heredado (el valor de this
) en el momento en el que se define la función flecha. En este caso, el código no se ejecuta dentro de ninguna otro objecto/scope si no que se ejecuta en el scope global, por lo que this === Window
.
Parece que la pregunta va sobre la diferencia entre () => {}
y function() {}
.
(Lo siguiente, si sabes la diferencia entre arrow functions y functions, puedes pasar de ello)
spoilerPor ejemplo:
const x = {a: () => console.log(this) }
x.a() // Devuelve window
const y = {a: function() { console.log(this) }}
y.a() // Devuelve {a: fn(...)}
Con la función flecha, x.a
al ser una arrow function, está bindeada al scope en el que se definió.
Es decir, x.a.bind(1234)()
sigue devolviendo window. Mientras que en y.a
, this
depende del scope en el que se ejecuta: y.a.bind(1234)()
devuelve 1234, y z = {b: y.a}; z.b()
devuelve z. z.b
apunta a y.a
, pero la función se ejecuta con scope z
.
Otro ejemplo más: const x = {a: {b: function() { return (() => this)() } }}
.
x.a.b()
devuelve b
Para soltar más chapa aún, todo depende de cuándo y dónde se define (se crea en el engine) la función flecha. En el ejemplo anterior con x
, se define cuando se ejecuta la asignación const x = ...
. En este último ejemplo, se define cuando se llama a x.a.b
. No existe la función flecha si no llamas a x.a.b
, y cada vez que llames a x.a.b
se crea una nueva función flecha.
En todo caso, no parece un muy buen ejemplo con el console.log, lo podrían haber planteado mucho mejor.
PS: es tarde y puede que me haya explicado como el culo o metido varios gambazos