Ten mucho cuidado con window, this y self.

He visto a veces, con objeto de mejorar la eficiencia, que se renombra el this asignandolo a una variable. Y algunas otras veces he visto que se hace con una variable llamada self.

javascript window this self

Mucho cuidado con esto, ya que si abrimos la consola del navegador recibiremos las siguientes respuestas ante estas instrucciones:

this === self //true
this === window //true

Lo cual quiere decir que window, this y self son lo mismo.

Piensatelo  dos veces antes de de utilizar aquello:

var self = this;
Ten mucho cuidado con window, this y self.

Ya, pero… ¿qué es el this en javascript? episodio 2

what the fuck is this?

Vimos en el episodio 1 que invocando a this en javascript en el contexto global nos devuelve el objeto window.

Ahora nos vamos a servir de la función

function imprimirThis(){
  console.log(this);
}

y la vamos a incluir en un objeto nuestro:

¿Qué es el this en javascript?
(descarga el código)

function imprimirThis () {
    console.log(this)
}
//creamos un objeto javascript
var objeto = {
    propiedadUno : “Valor propiedad uno”,
    propiedadDos : “Valor propiedad dos”,
    mostrarPropiedades : function (){
        console.log(“Propiedad uno = ” + this.propiedadUno + ” :::: Propiedad dos = ” + this.propiedadDos)
     },
    //asignamos la misma función que está en el contexto global
    imprimirThis: imprimirThis
}
objeto.mostrarPropiedades();
objeto.imprimirThis();
Resultado
Propiedad uno = Valor propiedad uno :::: Propiedad dos = Valor propiedad dos
Object {propiedadUno“Valor propiedad uno”propiedadDos“Valor propiedad dos”mostrarPropiedadesfunctionimprimirThisfunction}
  1. imprimirThisfunction imprimirThis() {
  2. mostrarPropiedadesfunction (){
  3. propiedadDos“Valor propiedad dos”
  4. propiedadUno“Valor propiedad uno”
  5. __proto__Object

Vemos que desde dentro de objeto this es el mismo objeto. Lo demuestran las sentencias:

this.propiedadUno
this.propiedadDos

Esta vez la función que imprime el this no imprime el objeto window, si no nuestro objeto.

Por lo tanto, el this dentro de un objeto es el mismo objeto.

Seguiremos complicándolo en el episodio 3…

Ya, pero… ¿qué es el this en javascript? episodio 2

Ya, pero… ¿qué es el this en javascript? episodio 1

what the fuck is this?

La mala noticia es que el this en javascript es dinámico y va cambiando según el contexto en el que hagamos referencia a él.

En este episodio 1 voy a por lo fácil. Para verlo hay que seguir los siguientes pasos:

  1. Abrir un navegador (Chrome por ejemplo). La página a la que vayas da igual.
  2. Pulsar F12 para abrir las “herramientas del desarrollador”
  3. Ir a la pestaña Consola desde donde podremos ejecutar comandos javascript

Una vez allí escribimos

this

La salida de consola es…..

salida de consola: this devuelve window

 

Eso es, el objeto window, el objeto más global de javascript (cuando se ejecuta en un navegador).

Tiene su lógica ya que en el momento de invocarlo nuestro contexto es el global.

Ahora voy a crear una función que cuelga directamente del contexto global que nos va a imprimir el objeto this.

function imprimirThis(){
console.log(this);
}

Al llamar a esta función con

imprimirThis();

tendremos

Salida de consola. this

Como la función se ejecuta en un contexto global, de nuevo nos devuelve el objeto window. Podrías pensar que  this iba a ser la función, pero no.

Video en youtube.

Hasta ahora muy fácil ¿no? Desgraciadamente, en los siguientes episodios se irá complicando…  😦

Ya, pero… ¿qué es el this en javascript? episodio 1