Cómo usar esto en las funciones de flecha de ES6
Esta vez le mostraré cómo usar esto en la función de flecha de ES6 y cuáles son las precauciones para usarlo en la función de flecha de ES6. El siguiente es un caso práctico, echemos un vistazo.
Breve introducción: Esto en la función de flecha apunta a una función definida de manera diferente a la función general. La definición de esto en la función de flecha: esto en la función de flecha está vinculado cuando se define la función, no cuando. la función se ejecuta.
(1) La función general a la que apunta está vinculada durante la ejecución. Cuando se ejecuta obj.say(), esto apunta al objeto obj.
var x=11;
var obj={
x:22,
say:función(){
console.log(this.x)
}
}
obj.say();
// La salida de console.log es 22 (2). ¡El llamado enlace en el momento de la definición significa que esto se hereda del contexto de ejecución principal! ! Esto, como este. This.x aquí en realidad representa window.x, por lo que el resultado es 11.
var x=11;
var obj={
x:22,
decir:()=>{
console.log(this.x);
}
}
obj.say();
//El valor de salida es 11. Otros similares son:
(3)
var a=11function test1(){ this.a=22; let b=function(){
console.log(this.a);
};
b();
}var x=nueva prueba1( );
Función de flecha de salida 11:
var a=11; función test2(){ this.a=22; .a)} b();}var x=new test2();// La salida de 22 es extraña, ¿verdad? Así es como lo entiendo. El significado específico de vincular esto cuando se define en ES6 debe heredarse de. parent. ¡Esto en el contexto de ejecución no debe ser el contexto de ejecución principal! ! ! De esta manera se resuelven muchas direcciones poco claras en las funciones de flecha.
Nota: ¡Los objetos simples (no funciones) no tienen contexto de ejecución!
Comprensión profunda de esto en las funciones de flecha
En las funciones de flecha, la fijación de este punto no se debe a que exista un mecanismo para vincularlo dentro de la función de flecha. es que la función de flecha es fundamentalmente Sin su propio this, el this interno es el this del bloque de código externo. Precisamente por no tener esto no se puede utilizar como constructor.
Podemos simular la conversión de la función de flecha en ES5:
// ES6function foo() {
setTimeout(() => { console.log( ' id:', this.id);
}, 100);
}
// ES5function foo() { var _this = setTimeout ( function () { console.log('id:', _this.id);
}, 100);
}Entonces, al definir un objeto, defina las propiedades del objeto. este interior generalmente apunta al mundo global, o esto al entorno donde se encuentra el objeto.
Creo que domina los métodos después de leer estos casos. Para obtener más información interesante, preste atención a otros artículos relacionados en Gxl.com.
Lectura relacionada:
Resumen de la experiencia de usar Python Django en desarrollo
Sintaxis del módulo ES6 carga importación exportación
Cómo utilizar getBoundingClientRect() para lograr la fijación del desplazamiento del contenedor div