A função de seta é uma das atualizações mais populares do ECMAScript 6. Introduz uma nova sintaxe para definir funções usando "Arrow" (=>), é ... é bunked ~. As principais diferenças entre as funções de seta e as funções tradicionais de JavaScript são as seguintes:
1. Relevância para isso. O valor disso está interno, dependendo de onde a função de seta é definida, não o contexto em que a função de seta é executada.
2.Now não está disponível. A função de seta não pode usar a nova palavra -chave para instanciar o objeto, caso contrário, um erro será relatado.
3. Isso é imutável. Isso está embutido para funcionar e é uma constante em todo o ambiente de execução no corpo da função.
4. Nenhum objeto de argumentos. Os parâmetros recebidos não podem ser acessados através do objeto Argumentos. Isso só pode ser feito usando nomeação explícita ou outros novos recursos ES6.
A existência dessas diferenças é razoável. Primeiro, a ligação a isso é uma das fontes comuns de erros de JavaScript. É fácil perder valores internos de funções ou obter resultados inesperados. Em segundo lugar, a limitação da função de seta para usar essa referência fixa é propícia ao processamento de otimização do mecanismo JavaScript.
1. Sintaxe
A sintaxe de uma função de seta é simples, definindo as variáveis independentes, depois a seta e o corpo da função. Variáveis e tópicos independentes podem ser usados em um formato mais conciso devido a uso diferente. O exemplo a seguir é uma função de seta que passa um parâmetro e retorna um valor.
A cópia do código é a seguinte:
var refletir = value => value;
// equivalente a:
var refletir = function (value) {
valor de retorno;
};
Pode -se observar que você pode apenas escrever um parâmetro passando, sem adicionar colchetes. A seta aponta para o corpo da função, mas o corpo da função é apenas uma instrução de retorno simples, portanto não há necessidade de adicionar aparelhos. Após a construção da função, ela é atribuída para refletir e referência.
Se vários parâmetros precisarem ser transmitidos, os suportes devem ser adicionados. Por exemplo:
A cópia do código é a seguinte:
var sum = (num1, num2) => num1 + num2;
// equivalente a:
var sum = função (num1, num2) {
retornar num1 + num2;
};
O método SUM () é adicionar dois parâmetros e passar o resultado de volta. A única diferença em relação ao exemplo anterior é que dois parâmetros são transmitidos, para que eles sejam incluídos entre colchetes. É como funções tradicionais, com vírgulas entre parênteses separados em parâmetros. Da mesma forma, se a função não precisar passar nos parâmetros, ela também deve ser substituída por colchetes vazios.
A cópia do código é a seguinte: var sum = () => 1 + 2;
// equivalente a:
var sum = function () {
retornar 1 + 2;
};
Se você deseja usar um corpo de função padrão ou pode haver mais instruções para executar no corpo da função, inclua o corpo da função no aparelho e defina claramente o valor de retorno. Por exemplo:
A cópia do código é a seguinte:
var sum = (num1, num2) => {return num1 + num2; }
// equivalente a:
var sum = função (num1, num2) {
retornar num1 + num2;
};
A parte do aparelho é basicamente equivalente às funções tradicionais, exceto que o parâmetro de argumentos não está disponível.
Porque os aparelhos são o logotipo do corpo da função. Se a função de seta desejar retornar um objeto personalizado, ele deve incluir o objeto primeiro. Por exemplo:
A cópia do código é a seguinte:
var getTempitem = id => ({
eu fiz,
Nome: "Temp"
});
// equivalente a:
var getTempitem = function (id) {
retornar {
eu fiz,
Nome: "Temp"
};
};
Como pode ser visto no exemplo acima, o uso de colchetes para incluir colchetes encaracolados é a definição do objeto, não o corpo da função.
2. Use
Um dos erros mais comuns no JavaScript é essa associação dentro de uma função. Como isso leva o valor de acordo com o ambiente de execução atual da função, causará mal -entendidos ao ligar, resultando em um impacto em outros objetos não relacionados. Veja o seguinte exemplo:
A cópia do código é a seguinte:
var pageHandler = {
ID: "123456",
init: function () {
document.addeventlistener ("clique", função (evento) {
this.Dosomething (event.type); // erro
}, false);
},
Dosomething: function (type) {
console.log ("manuseio" + tipo + "para" + this.id);
}
};
Neste código, a intenção original é deixar o método init () de PageHandler () ser usado para criar interações e chamar isso.dosomething () na função de manipulador de eventos de clique. No entanto, o código não é executado de acordo com a intenção original do design. Em tempo de execução, isso aponta para o objeto global, em vez do PageHandler, que causa isso.Dosomething () Call para invalidar e ocorre um erro porque o método não existe no objeto global.
Obviamente, você pode usar o bind () na função para associá -lo explicitamente ao PageHandler, veja abaixo:
A cópia do código é a seguinte:
var pageHandler = {
ID: "123456",
init: function () {
document.addeventListener ("clique", (function (event) {
this.Dosomething (event.type);
}). Bind (this), false);
},
Dosomething: function (type) {
console.log ("manuseio" + tipo + "para" + this.id);
}
};
Embora pareça um pouco estranho, a execução do código agora está alinhada com as expectativas. Ao chamar a ligação (isso) da função, uma nova função que tem sido associada ao existente é criada, o que significa que outra camada está incluída para alcançar o objetivo.
Como a função de seta já suporta essa associação, será mais revigorante usar a função de seta aqui. Veja o seguinte exemplo:
A cópia do código é a seguinte:
var pageHandler = {
ID: "123456",
init: function () {
document.addeventlistener ("clique",
evento => this.Dosomething (event.type), false);
},
Dosomething: function (type) {
console.log ("manuseio" + tipo + "para" + this.id);
}
};
A função de manuseio de eventos nessa instância chama a função de seta deste.Dosomething (). O valor disso é o valor deste init (). Portanto, é equivalente a se ligar ().
A natureza concisa e concisa das funções de seta também a torna uma escolha ideal para outras variáveis independentes de função. Por exemplo, para usar um comparador personalizado para organizar matrizes no ES5, consulte o código típico abaixo:
A cópia do código é a seguinte:
var resultado = valores.sort (função (a, b) {
retornar a - b;
});
O exemplo acima usa muitas sintaxe para implementar uma operação simples. Se você usar funções de seta, pode escrever um código muito refinado:
A cópia do código é a seguinte:
var resultado = valores.sort ((a, b) => a - b);
Os métodos de classificação/mapa/redução das matrizes suportam funções de retorno de chamada. O uso de funções de seta pode simplificar o processo de escrita e libertar suas mãos para fazer o que você deseja.
3. Suplemento
As funções de seta são realmente diferentes das funções tradicionais, mas ainda têm características comuns. Por exemplo:
1. Tipoof Operação na função de seta retornará "função".
2. A função de seta ainda é uma instância de função; portanto, o método de execução do Instância de é consistente com o das funções tradicionais.
3.call/apply/bind o método ainda é aplicável às funções de seta, mas mesmo que esses métodos sejam chamados para expandir o escopo atual, isso não mudará.
A maior diferença entre as funções de seta e as funções tradicionais é que novas operações estão desativadas.
4. Conclusão
A função de seta é um novo recurso do ECMAScript 6 que atraiu muita atenção e está sendo constantemente otimizado. É uma tendência geral usar uma gramática breve para definir o processo de escrita de funções ou declarações, e elas certamente serão invencíveis e ninguém poderá detê -las. Sua associação com a palavra -chave que isso faz com que os desenvolvedores não sejam mais irritados e o otimizam para melhorar o desempenho através do mecanismo JavaScript. Falando nisso, meus amigos já estão com sede. Se você quiser experimentar a função de seta, basta abrir a versão mais recente do Firefox.