La diferencia entre la función de flecha y la función ordinaria.
Como la sintaxis de la función de flecha recientemente agregada en ES6, los desarrolladores la adoran profundamente, y también es una pregunta típica que se hace a menudo durante las entrevistas de front-end. No solo simplifica nuestro código, sino que también permite a los desarrolladores deshacerse de este punto "errático".Este artículo analiza la diferencia entre las funciones de flecha y las funciones ordinarias.
En mi opinión, lo que más le preocupa al entrevistador y la diferencia más crítica entre los dos es la diferencia de este punto. Esto en una función normal apunta al objeto al que se llama la función, por lo que para diferentes llamadores, el valor de este es diferente. La función de flecha no tiene su propio this (al mismo tiempo, no hay otras variables locales en la función de flecha, como this, argument, super, etc.), por lo que this en la función de flecha es fijo y apunta al objeto donde se define la función.
Funciones ordinarias
Creo que todo el mundo ya está muy familiarizado con el uso de las funciones ordinarias, vamos a dar un ejemplo sencillo a continuación.
var a = 3;
var obj = {
a : 1,
foo : function(){
console.log(this.a);
}
}
obj.foo(); //1
var bar = obj;
bar.a = 2;
bar.foo(); //2
var baz = obj.foo;
baz(); //3
En el código anterior, hay tres situaciones:
Llame al método foo directamente a través de obj. En este momento, esto apuntará al objeto que llama a la función foo, es decir, obj;
asigne el objeto obj a un nuevo objeto bar. En este momento, llame a la función foo a través de bar, y el valor de esto será Apuntar a la barra de llamadas,
asignar obj.foo a un nuevo objeto baz, llamar a la función foo a través de baz(), en este momento esto apunta a la ventana,
de esto podemos sacar una conclusión:
El this de una función normal siempre se refiere a su llamador directo.
En modo estricto, si no se encuentra un llamante directo, este en la función no está definido.
En el modo predeterminado (modo no estricto), si no se encuentra una persona que llama directamente, esto en la función apunta a la ventana.
Considere nuevamente la siguiente situación:
var obj = {
a : 1,
foo : function(){
setTimeout(
function(){
console.log(this.a),3000})
}
}
obj.foo(); //undefined
Puede pensar que la salida debería ser 1 en este punto, pero el resultado no está definido. Porque en este momento esto apunta al objeto de ventana global.
A partir de los ejemplos anteriores, se pueden extraer las siguientes conclusiones:
Para un método (es decir, la función se llama a través de un objeto), esto en una función ordinaria siempre apunta a su llamador.
Para funciones generales, esto apunta a variables globales (en modo no estricto) o indefinidas (en modo estricto). En el ejemplo anterior, ningún objeto llama a la función en setTimeout, por lo que este punto sigue siendo el objeto de la ventana. Por lo tanto, esto también se puede resumir de la siguiente manera: javascript, esto se puede considerar simplemente como enlace tardío.Cuando no hay un lugar para enlazar, se enlazará a la ventana o no estará definido de forma predeterminada.
¿Qué pasa si queremos poder usar esto en la función setTimeout en el ejemplo anterior? Antes de que aparecieran las funciones de flecha, solíamos usar los siguientes dos métodos:
Fuera de la función setTimeout, es decir, dentro de la función de nivel superior foo, esto se logra asignando el valor de this a una variable temporal.
var obj = {
a : 1,
foo : function(){
var that = this;
setTimeout(
function(){
console.log(that.a),3000})
}
}
obj.foo(); //1
Enlace esto a través de bind().
var obj = {
a : 1,
foo : function(){
setTimeout(
function(){
console.log(this.a),3000}.bind(this))
}
}
obj.foo(); //1
Este fenómeno se ha mejorado después de la introducción de funciones de flecha en ES6.
Función de flecha
La función de flecha es una nueva característica introducida en ES6, el método de uso es:
()=>{
console.log(this)}
El () es el parámetro que se va a introducir y el {} es la instrucción que se va a ejecutar. La función de flecha es una manifestación de la programación funcional. La programación funcional se centra más en la relación entre la entrada y la salida, omitiendo algunos factores del proceso. Por lo tanto, las funciones de flecha no tienen sus propios argumentos this, new target (ES6) y super (ES6). ). Las funciones de flecha son equivalentes a las funciones anónimas, por lo que new no se puede usar como constructor.
Esto en una función de flecha siempre se refiere a esto en su ámbito principal. En otras palabras, la función flecha captura el valor this de su contexto como su propio valor this. Ningún método puede cambiar su punto, como call(), bind(), apply(). Cuando se llama a esto en una función de flecha, simplemente busca en la cadena de alcance y encuentra el más cercano para usar, que no tiene nada que ver con el contexto de la llamada. Vamos a explicarlo con código.
var obj = {
a: 10,
b: () => {
console.log(this.a); // undefined
console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
},
c: function() {
console.log(this.a); // 10
console.log(this); // {a: 10, b: ƒ, c: ƒ}
},
d:function(){
return ()=>{
console.log(this.a); // 10
}
},
e:function(){
setTime
}
}
obj.b();
obj.c();
obj.d()();
Simplemente analice el código, esto en obj.b() heredará este valor en el contexto principal, es decir, tiene el mismo punto que obj, y es la ventana de variable global. El punto this de obj.c() es el llamador obj, y this en obj.d().() también hereda de this en el contexto principal, es decir, el punto this de d, que es obj.
A través de este ejemplo, podemos entender aproximadamente la diferencia entre esto en funciones ordinarias y esto en funciones anónimas, para que podamos usar estas dos funciones de manera correcta y razonable de acuerdo con nuestras necesidades en nuestro trabajo.