Eu tenho uma função que estou tentando converter para a nova sintaxe de seta em ES6 . É uma função nomeada:
function sayHello(name) {
console.log(name + ' says hello');
}
Existe uma maneira de dar um nome a ele sem uma instrução var:
var sayHello = (name) => {
console.log(name + ' says hello');
}
Obviamente, só posso usar essa função depois de defini-la. Algo como o seguinte:
sayHello = (name) => {
console.log(name + ' says hello');
}
Existe uma nova maneira de fazer isso no ES6 ?
Respostas:
Você faz isso da maneira que descartou em sua pergunta: você o coloca no lado direito de uma atribuição ou inicializador de propriedades em que a variável ou o nome da propriedade pode ser razoavelmente usado como um nome pelo mecanismo JavaScript. Não há outra maneira de fazer isso, mas fazer isso é correto e totalmente coberto pela especificação.
Por especificação, essa função tem um nome verdadeiro
sayHello
:Isso é definido em Operadores de Designação> Semântica de Tempo de Execução: Avaliação, onde chama a
SetFunctionName
operação abstrata (essa chamada está atualmente na etapa 1.e.iii).Da mesma forma, o Runtime Semantics: PropertyDefinitionEvaluation chama
SetFunctionName
e, portanto, atribui a essa função um nome verdadeiro:Os mecanismos modernos definem o nome interno da função para declarações como essa; O Edge ainda tem o bit disponível, como
name
na instância da função atrás de um sinalizador de tempo de execução.Por exemplo, no Chrome ou Firefox, abra o console da Web e execute este trecho:
No Chrome 51 e acima e Firefox 53 e acima (e Edge 13 e acima com um sinalizador experimental), quando você o executa, você verá:
Observe o
foo.name is: foo
eError...at foo
.No Chrome 50 e versões anteriores, Firefox 52 e versões anteriores e Edge sem o sinalizador experimental, você verá isso porque elas ainda não têm a
Function#name
propriedade:Observe que o nome está ausente
foo.name is:
, mas é mostrado no rastreamento da pilha. É que, na verdade, implementar aname
propriedade na função era de menor prioridade do que alguns outros recursos do ES2015; Chrome e Firefox têm agora; O Edge está atrás de uma bandeira, presumivelmente não ficará muito tempo atrás da bandeira.Corrigir. Não há sintaxe de declaração de função para funções de seta, apenas sintaxe de expressão de função e não há seta equivalente ao nome em uma expressão de função denominada no estilo antigo (
var f = function foo() { };
). Portanto, não há equivalente a:Você precisa dividi-lo em duas expressões (eu diria que você deveria fazer isso de qualquer maneira ) :
Obviamente, se você precisar colocar isso onde uma única expressão é necessária, sempre poderá usar ... uma função de seta:
Não estou dizendo que isso seja bonito, mas funciona se você absolutamente, positivamente, precisar de um invólucro de expressão única.
fonte
let f = () => { /* do something */ };
atribua um nome à função,let g = (() => () => { /* do something */ })();
não.o.foo = () => {};
não dará um nome à função. Isso foi intencional para evitar vazamento de informações.Não. A sintaxe da seta é um atalho para funções anônimas. Funções anônimas são, bem, anônimas.
As funções nomeadas são definidas com a
function
palavra - chave.fonte
SetFunctionName
é usada.let a = () => {};
define uma função nomeada (o nome éa
) de acordo com as especificações e nos mecanismos modernos (gera um erro para ver); eles apenas ainda não suportam aname
propriedade (mas está nas especificações e chegarão lá eventualmente).Se por 'nomeado', você quer dizer que deseja que a
.name
propriedade da sua função de seta seja definida, você está com sorte.Se uma função de seta estiver definida no lado direito de uma expressão de atribuição, o mecanismo pegará o nome no lado esquerdo e o utilizará para definir as funções da seta
.name
, por exemploDito isto, sua pergunta parece ser mais 'posso obter uma função de seta para içar?'. A resposta para isso é um grande e velho "não", receio.
fonte
name
propriedade em todos os locais exigidos pelas especificações do ES2015; eles vão conseguir. É uma das últimas coisas na lista de conformidade do Chrome e nem o Chrome 50 o possui (o Chrome 51 finalmente o fará). Detalhes . Mas o OP descartou especificamente fazer isso (estranhamente).Parece que isso será possível com o ES7: https://babeljs.io/blog/2015/06/07/react-on-es6-plus#arrow-functions
O exemplo dado é:
Observe que, para que isso funcione com babel, eu precisava habilitar a sintaxe mais experimental do estágio 0 do ES7. No meu arquivo webpack.config.js, atualizei o babel loader da seguinte maneira:
fonte
this.handleOptionsButtonClick = this.handleOptionsButtonClick.bind(this);
constructor() { this.handleOptionsButtonClick = (e) => {…}; }
que é totalmente equivalente ao código na sua resposta, mas que já funciona no ES6. Não há necessidade de usar.bind
.this
contexto"let a = () => {};
define uma função de seta nomeada chamadaa
. Detalhes .Na verdade, parece que uma maneira de nomear funções de seta (pelo menos a partir do chrome 77 ...) é fazer isso:
fonte
fn('yourName', ()=>{})
, o que poderia manter 100% de função de seta correta semântica, ou melhor ainda um plugin babel para "chamado sintaxe da função seta":fn yourName() => {}
. Qualquer um desses compilaria até o código acima. Acho setas nomeados seria tão BADA55para escrever a função de seta nomeada, você pode usar o exemplo abaixo, onde eu tenho uma classe chamada LoginClass e, dentro dessa classe, escrevi uma seta chamada função , denominada
successAuth
classe LoginClass {fonte
ESTE É ES6
Sim, acho que o que você procura é algo assim:
fonte
Você pode pular a parte da função e a parte da seta para criar funções. Exemplo:
fonte