Entendiendo completamente esta palabra clave

El tutorial de hoy es cortesía del talentoso Cody Lindley, de su libro electrónico gratuito: Enlightenment JavaScript. Discute lo confuso esta palabra clave, y las diversas formas de determinar y establecer su valor.

Tutorial republicado

Cada pocas semanas, revisamos algunas de las publicaciones favoritas de nuestros lectores de toda la historia del sitio. Este tutorial se publicó por primera vez en julio de 2011..


Resumen conceptual de esta

Cuando se crea una función, se crea una palabra clave llamada esto (detrás de la escena), que enlaza con el objeto en el que opera la función. Dicho de otra manera, esto está disponible para el alcance de su función, pero es una referencia al objeto del cual esa función es una propiedad / método..

Echemos un vistazo a este objeto:

 

Note cómo dentro de la getGender función, estamos accediendo a la propiedad de género usando notación de puntos (por ejemplo, cody.gender) en el propio objeto cody. Esto puede ser reescrito usando esta para acceder a la cody objeto porque esta apunta a la cody objeto.

 

los esta utilizado en esto. simplemente se refiere a la cody Objeto sobre el que se encuentra la función.
operando.

El tema de esta Puede ser confuso, pero no tiene por qué serlo. Solo recuerda que, en general, esta se usa dentro de las funciones para referirse al objeto dentro del cual está contenida la función, a diferencia de la función en sí misma (las excepciones incluyen el uso de nuevo palabra clave o llamada() y aplicar()).

Notas importantes

  • La palabra clave esta se ve y actúa como cualquier otra variable, excepto que no puedes modificarla.
  • - Opuesto a argumentos y cualquier parámetro enviado a la función., esta es una palabra clave (no una propiedad) en el objeto de llamada / activación.

Como es el valor de esta Determinado?

El valor de esta, Pasado a todas las funciones, se basa en el contexto en el que se llama a la función en tiempo de ejecución. Preste atención aquí, porque esta es una de esas peculiaridades que solo necesita memorizar.

los miObjeto objeto en el código de abajo se le da una propiedad llamada decirFoo, que apunta a la decirFoo función. Cuando el decirFoo La función se llama desde el ámbito global, esto se refiere al objeto de ventana. Cuando se le llama como método de miObjeto, esta se refiere a miObjeto.

Desde que miObjeto tiene una propiedad llamada foo, esa propiedad es usada.

 

Claramente, el valor de esta se basa en el contexto en el que se llama la función. Considera que ambos myObject.sayFoo y decirFoo apuntar a la misma función. Sin embargo, dependiendo de dónde (es decir, el contexto) sayFoo () se llama desde, el valor de esta es diferente.

Si ayuda, aquí está el mismo código con el objeto head (es decir, ventana) utilizado explícitamente.

 

Asegúrese de que al pasar por las funciones, o tener múltiples referencias a una función, se dé cuenta de que el valor de esta cambiará dependiendo del contexto en el que llame a la función.

Nota IMPORTANTE

  • Todas las variables excepto esta y los argumentos siguen el alcance léxico.

los esta La palabra clave se refiere al objeto principal en funciones anidadas

Quizás te preguntes qué pasa con esta cuando se usa dentro de una función que está contenida dentro de otra función. La mala noticia está en ECMA 3., esta pierde su camino y se refiere al objeto cabeza (ventana objeto en los navegadores), en lugar del objeto dentro del cual se define la función.


En el código de abajo, esta dentro de func2 y func3 pierde su camino y no se refiere a miObjeto pero en cambio al objeto cabeza.

 

La buena noticia es que esto se solucionará en ECMAScript 5. Por ahora, debe tener en cuenta este problema, especialmente cuando comienza a pasar funciones como valores a otras funciones..

Considere el siguiente código y lo que sucede cuando pasa una función anónima a foo.func1. Cuando la función anónima se llama dentro de foo.func1 (una función dentro de una función) la esta El valor dentro de la función anónima será una referencia al objeto principal..

 

Ahora nunca olvidarás: el esta el valor siempre será una referencia al objeto principal cuando su función de host se encapsula dentro de otra función o se invoca dentro del contexto de otra función (de nuevo, esto se corrige en ECMAScript 5).


Trabajando alrededor del problema de la función anidada

De manera que la esta El valor no se pierde, simplemente puede usar la cadena de alcance para mantener una referencia a esta en la función padre. El siguiente código muestra cómo, usando una variable llamada ese, y aprovechando su alcance, podemos hacer un mejor seguimiento del contexto de la función.


Controlando el valor de esta

El valor de esta normalmente se determina a partir del contexto en el que se llama una función (excepto cuando el nuevo se usa la palabra clave (más sobre eso en un minuto), pero puede sobrescribir / controlar el valor de esta utilizando aplicar() o llamada() para definir que objeto esta Apunta al invocar una función. Usar estos métodos es como decir: "Oye, llama a la función X pero dile a la función que use el objeto Z como el valor para esta."Al hacerlo, la forma predeterminada en la que JavaScript determina el valor de esta está anulado.

A continuación, creamos un objeto y una función. Entonces invocamos la función a través de llamada() para que el valor de esta Dentro de la función usa. miObjeto como su contexto. Las declaraciones dentro del mi función la función se rellenará miObjeto con propiedades en lugar de poblar el objeto cabeza. Hemos alterado el objeto al cual esta (dentro de mi función) se refiere.

 

En el ejemplo anterior, estamos usando llamada(), pero aplicar() podría ser utilizado también. La diferencia entre los dos es cómo se pasan los parámetros para la función. Utilizando llamada(), Los parámetros son solo valores separados por comas. Utilizando aplicar(), los valores de los parámetros se pasan dentro de una formación. A continuación, es la misma idea, pero usando aplicar().

 

Lo que debe quitar aquí es que puede anular la forma predeterminada en que JavaScript determina el valor de esta en el alcance de una función.


Utilizando la esta Palabra clave dentro de una función constructora definida por el usuario

Cuando se invoca una función con el nuevo palabra clave, el valor de esta - como se indica en el constructor, se refiere a la instancia en sí. Dicho de otra manera: en la función de constructor, podemos aprovechar el objeto a través de esta antes de que el objeto sea realmente creado. En este caso, el valor por defecto de esta Cambia de una manera no muy diferente al uso llamada() o aplicar().

A continuación, configuramos un Persona función constructora que utiliza esta para hacer referencia a un objeto que se está creando. Cuando una instancia de Persona es creado, este nombre hará referencia al objeto recién creado y colocará una propiedad llamada nombre en el nuevo objeto con un valor del parámetro (nombre) Pasado a la función constructora..

 

Otra vez, esta se refiere al "objeto que será" cuando se invoca la función de constructor usando el nuevo palabra clave. Si no hubiéramos usado el nuevo palabra clave, el valor de esta sería el contexto en el que se invoca a Person, en este caso, el objeto head. Examinemos este escenario.

 

La palabra clave esta Dentro de un método de prototipo se refiere a una instancia de Constructor

Cuando se usa en funciones agregadas a un constructor prototipo propiedad, esta se refiere a la instancia en la que se invoca el método. Digamos que tenemos una costumbre Persona() Función constructora. Como parámetro, requiere el nombre completo de la persona. En caso de que necesitemos acceder al nombre completo de la persona, agregamos un whatIsMyFullName método para el Person.prototype, para que todo Persona Las instancias heredan el método. Cuando usas esta, el método puede referirse a la instancia que lo invoca (y por lo tanto a sus propiedades).

Aquí os muestro la creación de dos. Persona objetos (cody y lisa) y el heredado whatIsMyFullName Método que contiene la palabra clave this para acceder a la instancia..

 

La quita aquí es que la palabra clave esta se utiliza para referirse a casos cuando se utiliza dentro de un método contenido en el prototipo objeto. Si la instancia no contiene la propiedad, comienza la búsqueda del prototipo.

Notas

- Si la instancia o el objeto señalado por esta no contiene la propiedad a la que se hace referencia, se aplican las mismas reglas que se aplican a cualquier búsqueda de propiedad y la propiedad se "buscará" en la cadena de prototipos. Así que en nuestro ejemplo, si el nombre completo propiedad no estaba contenida dentro de nuestra instancia, entonces nombre completo sería buscado en Person.prototype.fullName entonces Object.prototype.fullName.


Lee el libro gratis!

Este libro no trata sobre los patrones de diseño de JavaScript o la implementación de un paradigma orientado a objetos con código JavaScript. No fue escrito para distinguir las buenas características del lenguaje JavaScript de las malas. No pretende ser una guía de referencia completa. No está dirigido a personas nuevas en programación o aquellas completamente nuevas a JavaScript. Tampoco es este un libro de cocina de recetas de JavaScript. Esos libros han sido escritos..