ES6 invocó inmediatamente la función de flecha

¿Por qué funciona esto en una Node.jsconsola (probado en 4.1.1 y 5.3.0) pero no funciona en el navegador (probado en Chrome)? Este bloque de código debe crear e invocar una función anónima que registre Ok.

() => {
  console.log('Ok');
}()

Además, aunque lo anterior funciona en Node, esto no funciona:

n => {
  console.log('Ok');
}()

Ni esto:

(n) => {
  console.log('Ok');
}()

Lo extraño es que cuando se agrega el parámetro, en realidad arroja un SyntaxErroren la parte que invoca de inmediato.

Debe convertirlo en una expresión de función en lugar de una definición de función que no necesita un nombre y lo convierte en un JavaScript válido.

(() => {
  console.log('Ok');
})()

Es el equivalente de IIFE

(function(){
   console.log('Ok')
})();

Y la posible razón por la que esto funciona en Node.js pero no en Chrome es porque su analizador lo interpreta como una función de ejecución automática, ya que esto

function() { console.log('hello'); }();

funciona bien en Node.jsEsta es una expresión de función y Chrome y Firefox y la mayoría del navegador lo interpreta de esta manera. Necesita invocarlo manualmente.

La forma más ampliamente aceptada de decirle al analizador que espere una expresión de función es simplemente envolverla en parens, porque en JavaScript, los parens no pueden contener declaraciones. En este punto, cuando el analizador encuentra la palabra clave de función, sabe analizarla como una expresión de función y no como una declaración de función.

En cuanto a la versión parametrizada , esto funcionará.

((n) => {
  console.log('Ok');
})()

Ninguno de estos debería funcionar sin paréntesis.

¿Por qué?

Porque de acuerdo con la especificación:

1. ArrowFunction está listado bajo AssignmentExpression
2. El LHS de una CallExpression debe ser MemberExpression , SuperCall o CallExpression

Por lo tanto, una función de flecha no puede estar en el LHS de una expresión de llamada .

Lo que esto significa efectivamente en cómo =>debe interpretarse es que funciona en el mismo tipo de nivel que los operadores de asignación =, +=etc.

Sentido

• x => {foo}() no se convierte(x => {foo})()
• El intérprete intenta interpretarlo como x => ({foo}())
• Por lo tanto, sigue siendo un SyntaxError
• Entonces el intérprete decide que (debe haber estado equivocado y lanza un SyntaxError

Hubo un error en la Babel de ello aquí , también.

La razón por la que ve problemas como este es porque la consola en sí misma trata de emular el alcance global del contexto al que se dirige actualmente. También intenta capturar los valores de retorno de las declaraciones y expresiones que escribe en la consola, para que aparezcan como resultados. Tomemos, por ejemplo:

> 3 + 2
< 5

Aquí, se ejecuta como si fuera una expresión, pero la ha escrito como si fuera una declaración. En los scripts normales, el valor se descartaría, pero aquí, el código debe ser mutilado internamente (como envolver toda la declaración con un contexto de función y una returndeclaración), lo que causa todo tipo de efectos extraños, incluidos los problemas que está experimentando.

Esta es también una de las razones por las cuales algunos códigos básicos de ES6 en scripts funcionan bien pero no en la consola de Chrome Dev Tools.

Intente ejecutar esto en Node y la consola de Chrome:

{ let a = 3 }

En Node o una <script>etiqueta funciona bien, pero en la consola, da Uncaught SyntaxError: Unexpected identifier. También le proporciona un enlace a la fuente en la VMxxx:1que puede hacer clic para inspeccionar la fuente evaluada, que se muestra como:

({ let a = 3 })

Entonces, ¿por qué hizo esto?

La respuesta es que necesita convertir su código en una expresión para que el resultado pueda ser devuelto a la persona que llama y se muestre en la consola. Puede hacer esto envolviendo la declaración entre paréntesis, lo que la convierte en una expresión, pero también hace que el bloque anterior sea sintácticamente incorrecto (una expresión no puede tener una declaración de bloque).

La consola intenta solucionar estos casos extremos al ser inteligente con el código, pero eso está más allá del alcance de esta respuesta, creo. Puede presentar un error para ver si eso es algo que considerarían solucionar.

Aquí hay un buen ejemplo de algo muy similar:

https://stackoverflow.com/a/28431346/46588

La forma más segura de hacer que su código funcione es asegurarse de que se pueda ejecutar como una expresión e inspeccionar el SyntaxErrorenlace de origen para ver cuál es el código de ejecución real y aplicarle una solución de ingeniería inversa. Por lo general, significa un par de paréntesis estratégicamente ubicados.

En resumen: la consola intenta emular el contexto de ejecución global con la mayor precisión posible, pero debido a las limitaciones de la interacción con el motor v8 y la semántica de JavaScript, esto a veces es difícil o imposible de resolver.

Hice una pregunta como esta:

@getify Tengo esta pregunta: para producir un patrón #IIFE usamos parans alrededor de una declaración de función para transformarla en una expresión de función y luego invocarla. Ahora en la función de flecha IIFE, ¿por qué necesitamos parans? ¿No es la función de flecha ya una expresión por defecto?

y esta es la respuesta de Kyle Simpson:

una función de flecha es una expr, pero necesitamos parens circundantes b / c de "precedencia de operador" (sorta), de modo que los parens finales para invocar la flecha-IIFE se apliquen a toda la función y no solo al último token de su cuerpo .

x => console.log(x)(4)

vs

(x => console.log(x))(4)

- getify (@getify) 12 de junio de 2020