javascript - sintaxis - ¿Cómo escribo una función de flecha con nombre en ES2015?
map javascript (8)
Tengo una función que estoy tratando de convertir a la nueva sintaxis de flecha en ES6 . Es una función con nombre:
function sayHello(name) {
console.log(name + '' says hello'');
}
¿Hay alguna manera de darle un nombre sin una declaración var:
var sayHello = (name) => {
console.log(name + '' says hello'');
}
Obviamente, solo puedo usar esta función después de haberla definido. Algo como lo siguiente:
sayHello = (name) => {
console.log(name + '' says hello'');
}
¿Hay una nueva forma de hacer esto en ES6 ?
¿Cómo escribo una función de flecha con nombre en ES2015?
Lo hace de la forma que descartó en su pregunta: lo coloca en el lado derecho de una asignación o inicializador de propiedad donde el motor de JavaScript puede usar razonablemente la variable o el nombre de la propiedad como un nombre. No hay otra forma de hacerlo, pero hacerlo es correcto y está completamente cubierto por la especificación.
Según las especificaciones, esta función tiene un nombre verdadero,
sayHello
:
var sayHello = name => {
console.log(name + '' says hello'');
};
Esto se define en
Operadores de asignación> Semántica de tiempo de ejecución: evaluación
donde llama a
la operación abstracta
SetFunctionName
(esa llamada se encuentra actualmente en el paso 1.e.iii).
De manera similar, la
semántica de tiempo de ejecución: PropertyDefinitionEvaluation
llama a
SetFunctionName
y, por lo tanto, le da a esta función un nombre verdadero:
let o = {
sayHello: name => {
console.log(`${name} says hello`);
}
};
Los motores modernos ya establecen el nombre interno de la función para declaraciones como esa;
Edge todavía tiene el bit que lo hace disponible como
name
en la instancia de la función detrás de un indicador de tiempo de ejecución.
Por ejemplo, en Chrome o Firefox, abra la consola web y luego ejecute este fragmento:
"use strict";
let foo = () => { throw new Error(); };
console.log("foo.name is: " + foo.name);
try {
foo();
} catch (e) {
console.log(e.stack);
}
En Chrome 51 y superior y Firefox 53 y superior (y Edge 13 y superior con una marca experimental), cuando ejecute eso, verá:
foo.name is: foo Error at foo (http://stacksnippets.net/js:14:23) at http://stacksnippets.net/js:17:3
Tenga en cuenta que
foo.name is: foo
y
Error...at foo
.
En Chrome 50 y versiones anteriores, Firefox 52 y versiones anteriores, y Edge sin el indicador experimental, verás esto en su lugar porque todavía no tienen la propiedad
Function#name
(todavía):
foo.name is: Error at foo (http://stacksnippets.net/js:14:23) at http://stacksnippets.net/js:17:3
Tenga en cuenta que falta el nombre de
foo.name is:
pero se muestra en el seguimiento de la pila.
Es solo que la implementación de la
propiedad de
name
en la función era de menor prioridad que otras características de ES2015;
Chrome y Firefox lo tienen ahora;
Edge lo tiene detrás de una bandera, presumiblemente ya no estará detrás de la bandera por mucho tiempo.
Obviamente, solo puedo usar esta función después de haberla definido
Correcto.
No existe una sintaxis de
declaración de
función para las funciones de flecha, solo la sintaxis de
expresión de
función, y no hay una flecha equivalente al nombre en una expresión de función con nombre de estilo antiguo (
var f = function foo() { };
).
Entonces no hay equivalente a:
console.log(function fact(n) {
if (n < 0) {
throw new Error("Not defined for negative numbers");
}
return n == 0 ? 1 : n * fact(n - 1);
}(5)); // 120
Tienes que dividirlo en dos expresiones (argumentaría que deberías hacerlo de todos modos ) :
let fact = n => {
if (n < 0) {
throw new Error("Not defined for negative numbers.");
}
return n == 0 ? 1 : n * fact(n - 1);
};
console.log(fact(5));
Por supuesto, si tiene que poner esto donde se requiere una sola expresión, siempre puede ... usar una función de flecha:
console.log((() => {
let fact = n => {
if (n < 0) {
throw new Error("Not defined for negative numbers.");
}
return n == 0 ? 1 : n * fact(n - 1);
};
return fact(5);
})()); // 120
No digo que sea bonito, pero funciona si necesitas absolutamente un contenedor de expresión.
No. La sintaxis de la flecha es una forma abreviada de funciones anónimas. Las funciones anónimas son, bueno, anónimas.
Las funciones con nombre se definen con la palabra clave de
function
.
Parece que esto será posible con ES7: https://babeljs.io/blog/2015/06/07/react-on-es6-plus#arrow-functions
El ejemplo dado es:
class PostInfo extends React.Component {
handleOptionsButtonClick = (e) => {
this.setState({showOptionsModal: true});
}
}
El cuerpo de las funciones de flecha de ES6 comparte el mismo léxico que el código que las rodea, lo que nos da el resultado deseado debido a la forma en que se definen los inicializadores de propiedades de ES7.
Tenga en cuenta que para que esto funcione con babel, necesitaba habilitar la sintaxis más experimental de la etapa 0 de ES7. En mi archivo webpack.config.js actualicé el cargador de babel así:
{test: //.js$/, exclude: /node_modules/, loader: ''babel?stage=0''},
Puede omitir la parte de la función y la parte de la flecha para crear funciones. Ejemplo:
const foo = (depth) => {console.log("hi i''m Adele")}
foo -> // the function itself
foo() -> // "hi i''m Adele"
Si por ''nombre'', quiere decir que desea establecer la propiedad
.name
de su función de flecha, tiene suerte.
Si se define una función de flecha en el lado derecho de una expresión de asignación, el motor tomará el nombre en el lado izquierdo y lo usará para establecer el nombre de la función de flecha, p. Ej.
var sayHello = (name) => {
console.log(name + '' says hello'');
}
sayHello.name //=== ''sayHello''
Dicho esto, su pregunta parece ser más "¿puedo obtener una función de flecha para izar?". Me temo que la respuesta a esa pregunta es un gran "no".
para escribir una
función de flecha con nombre
,
successAuth
usar el siguiente ejemplo, donde tengo una clase llamada LoginClass y dentro de esta clase escribí una
flecha llamada función
, llamada
successAuth
class LoginClass {
class YourClassNameHere{
constructor(age) {
this.age = age;
}
foo() {
return "This is a function with name Foo";
}
bar() {
return "This is a function with name bar";
}
}
let myVar = new YourClassNameHere(50);
myVar.foo();
ESTO ES ES6
Sí, creo que lo que buscas es algo como esto:
const foo = (depth) => {console.log("hi i''m Adele")} foo -> // the function itself foo() -> // "hi i''m Adele"