8

Hay una cosa que no entiendo y es en este caso: el funcionamiento del this.

this siempre apuntará al objeto que contenga la función y se llamará al this desde la función. En el ejemplo que pongo a continuación, mi segundo this apunta al objeto que he creado, pero ¿por qué el primer this apunta al botón que es un html element?

onclick es un evento, boton.onclick = function() ¿Lo tengo que ver como si onclick fuera una propiedad que le doy al objeto botón? ¿Debería interpretarlo así? Porque vamos, botón es un html element, me lio con como interpretar esto, ¿O es que el this apunta a eventos no solo a objetos ya que el evento es onclick?

var boton = document.getElementsByTagName('button')[0];
  boton.onclick = function(){
    console.log(this);

    let XMLrequest = new XMLHttpRequest();
    XMLrequest.onreadystatechange = function() {
      console.log(this);
    }
  }
<html>
<head>
  <title>JSON</title>
  <meta charset="utf-8">


</head>
<body>
  <button>click</button>

</body>
</html>

1
  • el this. es como decir el contexto donde se encuentra Commented el 20 dic. 2017 a las 16:31

4 respuestas 4

21

Si quieres una versión muy simplificada:

this apunta al contexto. En los manejadores de eventos, this es el elemento que ha recibido el evento (el botón, el div, el link...). Si llamas a una función como si fuese un método, this es el objeto. Pero que la función sea declarada como un método no asegura que sea llamada como tal.

Si quieres una versión más larga y "didáctica", con ejemplos:

El comportamiento de this es un poco especial en Javascript: Indica el contexto en el que está ejecutando el código. Si estás en el contexto global (no estás dentro de ninguna función), this es window. Si llamas a una función simplemente usando el nombre de la misma, el contexto se mantiene:

console.log(this===window);
function test() {
  console.log(this===window);
  if (this!==window) {
    console.log(this);
  }
}

test();

Pero en modo estricto, el contexto al llamar una función usando su nombre es undefined:

'use strict';

console.log(this===window);
    
function test() {
  console.log(this===window);
  if (this!==window) {
    console.log(this);
  }
}

test();

Pero si esa función es un atributo de un objeto, entonces this pasa a ser ese objeto:

function test() {
  console.log('Es window?:' + (this===window));
  if (this!==window) {
    console.log('Es obj?:' + (this===obj));
  }
}

console.log('Modo no estricto');

var obj={ 
  prueba: 'hola'
}

test();

console.log('Como método');

obj.metodo=test;

obj.metodo();

Entonces, cuando definimos una función callback podemos tener problemas si no sabemos cuál es el contexto donde se ejecuta la función:

class Contador {

  constructor() {
    this.count=0;
  }
  
  incrementar() {
    this.count++;
  }
}

let c= new Contador()
c.incrementar();
console.log(c.count)

let funcionInc=c.incrementar;

//falla porque el contexto no es un objeto Contador
funcionInc();

Imagina que tenemos un evento que queremos tratar con nuestro objeto contador:

class Contador {

  constructor() {
    this.count=0;
  }
  
  incrementar() {
    if (this.count !== undefined) {
      this.count++;
    } else {
      console.log('No hay count para incrementar!');
    }
  }
}

let c= new Contador();

$('button').on('click',c.incrementar);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>

Soluciones a este problema hay varias:

Una es "envolver" la ejecución con otra función:

class Contador {

  constructor() {
    this.count=0;
  }
  
  incrementar() {
    if (this.count !== undefined) {
      this.count++;
      console.log(this.count);
    } else {
      console.log('No hay count para incrementar!');
    }
  }
}

let c= new Contador();

$('button').on('click',function () {c.incrementar();});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>

Y otra solución es usar bind() (literalmente atar): permite fijar un contexto a una función, creando una nueva función que se comporta exactamente igual pero que siempre tiene el contexto que le hemos definido:

class Contador {

  constructor() {
    this.count=0;
  }
  
  incrementar() {
    if (this.count !== undefined) {
      this.count++;
      console.log(this.count);
    } else {
      console.log('No hay count para incrementar!');
    }
  }
}

let c= new Contador();
//con bind fijamos el contexto
let funcion=c.incrementar.bind(c);

$('button').on('click',funcion);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>

Otra solución es usar una función flecha. Las funciones flecha son un poco especiales, porque asignan el contexto en el momento en el que se definen, no cuando se ejecutan:

class Contador {

  constructor() {
    this.count = 0;
    
  }
  
  incrementar = () => { 
    this.count++;
    console.log(this.count);  
  }
}

let c = new Contador();

//no hace falta bind, el contexto se fijó al declarar la función
$('button').on('click',c.incrementar);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>

8

MDN define onclick como:

Una propiedad que devuelve el manejador del evento click del elemento actual.

El valor que recibe this depende de la forma en la cual se ejecuta/llama la función, veamos algunos ejemplos

Ejemplo 1

function saludar(){
    console.log(this)
}
<button onclick="saludar()">Saludar</button>

Como puedes ver en este ejemplo el this en este caso hace referencia al window

Ejemplo 2

function saludar(elemento){
    console.log(elemento)
}
<button onclick="saludar(this)">Saludar</button>

De esta forma si yo quisiera que this hiciera referencia al elemento que ejecuta el evento tendría que mandarlo como parámetro en la función que es disparada por el evento.

Ejemplo 3

var boton = document.querySelector('button');

boton.onclick = function(){
    console.log(this)
}

boton.addEventListener('mouseenter', saludar);

function saludar(){
    console.log(this)
}
<button>Saludar</button>

En cualquiera de estos dos casos this hace referencia directa al elemento que dispara el evento.

5

Buenas espero te ayude

this

La función de la palabra clave this se comporta un poco diferente en Javascript en comparación con otros lenguajes. Además tiene algunas diferencias entre el modo estricto y el modo no estricto.

En general, el valor de this está determinado por cómo se llama a la función. No puede ser establecida por una asignación en tiempo de ejecución, y esto puede ser diferente cada vez que la función es llamada. ES5 introdujo el método bind() para establecer el valor de la función this independientemente de como es llamada.

En este caso this va a referenciar a:

<button type="button" name="button">Boton</button>

Que seria el objeto que ejecuta el evento espero te ayude saludos.

  var boton = document.getElementsByTagName('button')[0];
  boton.onclick = function(){
    console.log("El this es = ",this);

    let XMLrequest = new XMLHttpRequest();
    XMLrequest.onreadystatechange = function() {
      console.log(this);
    }
  }
<button type="button" name="button">Boton</button>

Ejemplos

Contexto global En el contexto de ejecución global (fuera de cualquier función), this se refiere al objeto global, ya sea en modo estricto o no.

console.log(this.document === document); // true

// En los navegadores web, el objeto window también es un objeto global:
console.log(this === window); // true

this.a = 37;
console.log(window.a); // 37

Contexto de la función

Dentro de una función, el valor de this depende de cómo la función es llamada.

function f1(){
  return this;
}

 f1() === window; // objeto global

En este caso, el valor de this no está establecido por la llamada. Dado que el código no está en modo estricto, el valor de this debe ser siempre un objeto por lo que por defecto es el objeto global.

function f2(){
  "use strict"; // consultar modo estricto
  return this;
}

 f2() === undefined;

Fuente: MDN

3

onclick no es un evento, es un método que será llamado en caso de que ocurra el evento. Y efectivamente ese método pertenece al objeto boton.

3
  • no sabia que boton es un objeto, todo son objeto entonces? Boton es un html element en un principio HASTA QUE al adjuntarle una funcion, onclick sera un metodo y boton su objeto?
    – fran
    Commented el 20 dic. 2017 a las 11:13
  • 3
    En Javascript casi todo son objetos.
    – asantana o
    Commented el 20 dic. 2017 a las 11:25
  • 3
    boton es una instancia (objeto) de la clase HTMLElement (developer.mozilla.org/en-US/docs/Web/API/HTMLElement)
    – delCano
    Commented el 20 dic. 2017 a las 13:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.