flecha - funciones javascript

ES6 invocó inmediatamente la función de flecha

Question

¿Por qué funciona esto en una consola Node.js (probada 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 SyntaxError en la parte que invoca de inmediato.

Answer 1

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.js Esta es una expresión de función y Chrome y Firefox y la mayoría del navegador la 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'');
})()

Answer 2

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 las secuencias de comandos 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 declaración de return ), 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 que 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 etiqueta <script> funciona bien, pero en la consola, proporciona Uncaught SyntaxError: Unexpected identifier . También le proporciona un enlace a la fuente en forma de VMxxx:1 que puede hacer clic para inspeccionar la fuente evaluada, que aparece 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://.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 enlace de origen SyntaxError para ver cuál es el código de ejecución real y SyntaxError 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.

Answer 3

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

¿Por qué?

Porque de acuerdo con la especificación:

1. ArrowFunction aparece en 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 en (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

Aquí también había un error en Babel al respecto.