Al igual que clavar gelatina en una pared, la thispalabra clave en JavaScript es un poco como un juego de golpear un topo. Cada vez que crees que lo tienes, te das cuenta de que thispuede que no se refiera a lo que pensabas que era. Una vez más, se encuentra tratando de descifrar cómo y qué thisestá haciendo por usted en su programa JavaScript. En JavaScript, hay cuatro reglas clave para memorizar sobre cómo determinar a qué se refiere. También hay un orden de precedencia para estas reglas. En este tutorial, examinaremos exactamente lo que thishace por usted en JavaScript y memorizaremos las cuatro reglas que determinan su contexto. Vamos a profundizar ahora.
this se refiere a un objeto
Una cosa en la que podemos estar seguros es que pase lo que pase, thissiempre se está refiriendo a un objeto. Nunca se referirá a un valor primitivo como un booleano, una cadena o un número. Siempre será un objeto al que se refiere.
Contexto de la función
Antes de llegar a las reglas que determinan cómo thisfunciona, primero debemos comprender un poco cómo funcionan las funciones en JavaScript. Principalmente, debemos ser conscientes de lo siguiente:
Cada función, mientras se ejecuta, tiene una referencia a su contexto de ejecución actual. El contexto de ejecución actual se denomina
thispalabra clave.En otras palabras,
this¿qué objeto está asociado con la llamada de función actual?
Con esto en mente, debemos ser conscientes de lo más importante que debemos buscar cuando se trabaja thisen JavaScript. A lo que nos referimos es a cómo se llama a la función , cuándo se llama. En otras palabras, debe prestar especial atención al sitio de llamada de esa función. Porque es el sitio de la llamada el que determina a qué thisestá destinado. En esencia, thisactúa como un tipo de mecanismo de alcance dinámico en JavaScript.
Para demostrar esto, crearemos varios objetos JavaScript diferentes. Cada objeto tendrá una propiedad nombrada prop1y una propiedad nombrada decoder. La decoderpropiedad tendrá una referencia a una función nombrada thisdecoder()en todos los objetos. Veremos que el valor contenido en prop1dependerá completamente del sitio de llamada de la thisdecoder()función.
Aquí están las cuatro thisreglas vinculantes en orden de precedencia.
¡Todas las reglas dependen del sitio de llamada de la función! Si alguna vez está confundido en cuanto a a qué se refiere el enlace de esto, entonces debe buscar el sitio de llamada de la función y preguntar en cuál de los siguientes casos se ejecutó la función.
1. La newvinculación
La regla que tiene prioridad sobre todas las demás cuando se trata thises la nueva palabra clave de JavaScript . Sabemos que cuando se usa la nueva palabra clave con una llamada a una función de JavaScript, se crea un nuevo objeto de la nada. En este escenario, el objeto recién creado se establece en thispara esa llamada de función.
2. Vinculación explícita
La unión explícita se maneja con los apply(), call()y bind()los métodos de un objeto función. En JavaScript, las funciones son objetos, por lo tanto, las funciones mismas pueden tener métodos. Los primeros dos métodos son similares, ya que el primer argumento que se les proporciona es el objeto al que desea que se vincule la thispalabra clave. apply()y call()son casi lo mismo, pero la diferencia entre ellos es que call()acepta una lista de argumentos, mientras que apply()acepta una única matriz de argumentos. En nuestro ejemplo, solo pasamos un argumento, el objeto que queremos enlazar con este, por lo que en nuestro caso apply()y call()funciona de manera idéntica.
bind()es un poco más confuso. De hecho, crea una función completamente nueva, que luego es invocable. Cuando llama a esa nueva función, la thispalabra clave está vinculada al argumento proporcionado que se le dio a la bind()invocación.
3. Vinculación implícita
El enlace implícito es bastante fácil. El enlace implícito ocurre cuando llamas a una función como una propiedad o método de un objeto dado. En nuestro ejemplo a continuación, todos los objetos tienen una decoderpropiedad. Además, cada una de estas propiedades simplemente hace referencia a la misma función llamada thisdecoder(). Ninguno de los objetos dados posee la thisdecoder()función más que el otro, todos simplemente tienen referencias de pares a la misma función. Podría decirse que hemos puesto una referencia a una función en un objeto. Las reglas de vinculación implícita establecen que el objeto en el sitio de la llamada , también conocido como objeto base, objeto de contexto u objeto contenedor, se convierte en la vinculación de la thispalabra clave.
4. Regla vinculante predeterminada
Finalmente, llegamos a la regla de vinculación predeterminada. La regla de vinculación predeterminada se aplica cuando llama a una función y no se aplica ninguno de los tres escenarios anteriores. Parece una simple llamada a una función de vainilla. Cuando este es el caso, thisse vincula al objeto global. En el navegador, este es el objeto Ventana. nota: Es posible que la fuerza de Douglas Crockford lo patee espontáneamente con una caída circular si usa este enfoque. Estamos bromeando, por supuesto. Sin embargo, con toda seriedad, esta regla vinculante ha creado muchos riesgos de seguridad y dolores de cabeza para los desarrolladores de JavaScript. Para mitigar esto, puede usar el modo estricto en su código JavaScript, y el thisenlace será predeterminado en undefinedlugar del objeto global.
¿A qué se refiere esto en el resumen de JavaScript?
En resumen, no importa dónde se declare una función en JavaScript. Nadie posee una función más que nadie en JavaScript, todo es simplemente una referencia. Lo único que importa con respecto al thisenlace en JavaScript es cómo se ve el sitio de llamada de función .
1.
newenlace de palabras clave2. unión explícita con
apply(),call()obind()3. Vinculación implícita
4. La regla vinculante predeterminada
Estas reglas son imprescindibles para que las memorice para facilitar su vida cuando se trata de thisenlaces en JavaScript.
0 Comentarios