La función de flecha es una de las actualizaciones más populares en ECMAScript 6. Introduce una nueva sintaxis para definir funciones usando "flecha" (=>), es ... está boquedi ~. Las principales diferencias entre las funciones de flecha y las funciones tradicionales de JavaScript son las siguientes:
1. Relevancia para esto. El valor de esto está incorporado, dependiendo de dónde se define la función de flecha, no el contexto en el que se ejecuta la función de flecha.
2. Nuevo no está disponible. La función de flecha no puede usar la nueva palabra clave para instanciar el objeto, de lo contrario se informará un error.
3. Esto es inmutable. Esto está incorporado a la función y es una constante en todo el entorno de ejecución dentro del cuerpo de funciones.
4. Sin argumentos objeto. No se puede acceder a los parámetros entrantes a través del objeto Argumentos. Solo se puede hacer utilizando nombres explícitos u otras características nuevas de ES6.
La existencia de estas diferencias es razonable. Primero, vinculante a esto es una de las fuentes comunes de errores de JavaScript. Es fácil perder valores incorporados de funciones o obtener resultados inesperados. En segundo lugar, limitar la función de flecha al uso de esta referencia fija es propicio para el procesamiento de optimización de motores de JavaScript.
1. Sintaxis
La sintaxis de una función de flecha es simple, definiendo las variables independientes, luego el cuerpo de flecha y función. Las variables y temas independientes se pueden usar en un formato más conciso debido a un uso diferente. El siguiente ejemplo es una función de flecha que pasa un parámetro y devuelve un valor.
La copia del código es la siguiente:
var reflejar = valor => valor;
// equivalente a:
var reflejar = function (valor) {
valor de retorno;
};
Se puede ver que puede escribir un parámetro pasándolo, sin agregar soportes. La flecha apunta al cuerpo de la función, pero el cuerpo de la función es solo una simple declaración de retorno, por lo que no es necesario agregar aparatos ortopédicos. Después de construir la función, se asigna para reflejar y referencia.
Si se deben pasar múltiples parámetros, se deben agregar soportes. Por ejemplo:
La copia del código es la siguiente:
var sum = (num1, num2) => num1 + num2;
// equivalente a:
var sum = function (num1, num2) {
return num1 + num2;
};
El método Sum () es agregar dos parámetros y pasar el resultado hacia atrás. La única diferencia con el ejemplo anterior es que se pasan dos parámetros, por lo que deben estar encerrados en los soportes. Es como las funciones tradicionales, con comas entre paréntesis separadas en parámetros. Del mismo modo, si la función no necesita pasar en parámetros, también debe ser reemplazada por soportes vacíos.
La copia del código es la siguiente: var sum = () => 1 + 2;
// equivalente a:
var sum = function () {
devolver 1 + 2;
};
Si desea utilizar un cuerpo de función estándar, o puede haber más declaraciones para ejecutar en el cuerpo de funciones, encienda el cuerpo de la función en aparatos ortopédicos y definir claramente el valor de retorno. Por ejemplo:
La copia del código es la siguiente:
var sum = (num1, num2) => {return num1 + num2; }
// equivalente a:
var sum = function (num1, num2) {
return num1 + num2;
};
La parte en los aparatos ortopédicos es básicamente equivalente a las funciones tradicionales, excepto que el parámetro de argumentos no está disponible.
Porque los frenos son el logotipo del cuerpo de la función. Si la función de flecha desea devolver un objeto personalizado, primero debe encerrar el objeto en los soportes. Por ejemplo:
La copia del código es la siguiente:
var getTempitem = id => ({
hice,
Nombre: "temperatura"
});
// equivalente a:
var getTempItem = function (id) {
devolver {
hice,
Nombre: "temperatura"
};
};
Como se puede ver en el ejemplo anterior, el uso de soportes para incluir corchetes es la definición del objeto, no el cuerpo de la función.
2. Use
Uno de los errores más comunes en JavaScript es esta asociación dentro de una función. Debido a que esto toma el valor de acuerdo con el entorno de ejecución actual de la función, causará malentendidos al llamar, lo que resulta en un impacto en otros objetos no relacionados. Vea el siguiente ejemplo:
La copia del código es la siguiente:
var pageHandler = {
ID: "123456",
init: function () {
document.addeventListener ("hacer clic", función (evento) {
this.Dosomething (Event.Type); // error
}, FALSO);
},
Dosomething: function (type) {
console.log ("manejo" + tipo + "para" + this.id);
}
};
En este código, la intención original es dejar que el método init () de PageHandler se use para construir interacciones y llamar a esto. Dosomment () en la función del controlador de eventos de clic. Sin embargo, el código no se ejecuta de acuerdo con la intención de diseño original. En tiempo de ejecución, esto apunta al objeto global en lugar del PageHandler, que causa esta llamada. Dosom () para invalidar y se produce un error porque el método de dosimo no existe en el objeto global.
Por supuesto, puede usar Bind () en la función para asociar explícitamente esto con PageHandler, consulte a continuación:
La copia del código es la siguiente:
var pageHandler = {
ID: "123456",
init: function () {
document.addeventListener ("hacer clic", (función (evento) {
this.Dosomething (Event.Type);
}). bind (this), falso);
},
Dosomething: function (type) {
console.log ("manejo" + tipo + "para" + this.id);
}
};
Aunque se ve un poco extraño, la ejecución del código ahora está en línea con las expectativas. Al llamar al enlace (esto) de la función, una nueva función que se ha asociado con la existente, lo que significa que se incluye otra capa para lograr el propósito.
Debido a que la función de flecha ya admite esta asociación, será más refrescante usar la función de flecha aquí. Vea el siguiente ejemplo:
La copia del código es la siguiente:
var pageHandler = {
ID: "123456",
init: function () {
document.addeventListener ("hacer clic",
event => this.dosomthing (event.type), falso);
},
Dosomething: function (type) {
console.log ("manejo" + tipo + "para" + this.id);
}
};
La función de manejo de eventos en este caso llama a la función de flecha de este.dosomting (). El valor de esto es el valor de este init (). Por lo tanto, es equivalente a Bind ().
La naturaleza concisa y concisa de las funciones de flecha también lo convierte en una opción ideal para otras variables independientes de funciones. Por ejemplo, para usar un comparador personalizado para organizar matrices en ES5, consulte el código típico a continuación:
La copia del código es la siguiente:
VAR result = Values.sort (function (a, b) {
devolver a - b;
});
El ejemplo anterior usa muchas sintaxis para implementar una operación simple. Si usa funciones de flecha, puede escribir un código muy refinado:
La copia del código es la siguiente:
VAR result = Values.sort ((a, b) => a - b);
El sort/mapa/reducción de los métodos de matrices admite funciones de devolución de llamada. El uso de funciones de flecha puede simplificar el proceso de escritura y liberar sus manos para hacer lo que desea.
3. Suplemento
Las funciones de flecha son realmente diferentes de las funciones tradicionales, pero aún tienen características comunes. Por ejemplo:
1. La operación de typeOf en la función de flecha devolverá "función".
2. La función de flecha sigue siendo una instancia de función, por lo que el método de ejecución de instancia de es consistente con el de las funciones tradicionales.
3.Call/Aply/Bind El método todavía es aplicable a las funciones de flecha, pero incluso si estos métodos están llamados a expandir el alcance actual, esto no cambiará.
La mayor diferencia entre las funciones de flecha y las funciones tradicionales es que las nuevas operaciones están deshabilitadas.
4. Conclusión
La función de flecha es una nueva característica de Ecmascript 6 que ha atraído mucha atención y está constantemente optimizado. Es una tendencia general usar una breve gramática para definir el proceso de escritura de funciones o declaraciones, y seguramente serán invencibles y nadie puede detenerlos. Su asociación con la palabra clave esto hace que los desarrolladores ya no se molesten y lo optimice para mejorar el rendimiento a través del motor JavaScript. Hablando de esto, mis amigos ya tienen sed. Si desea probar la función de flecha, simplemente abra la última versión de Firefox.