5

Estoy presentando como un examen a ver mi nivel de JS y tengo varias dudas. Saqué 39/45 y mis errores son los siguientes y me gustaría que alguien me los aclarase un poco:

¿Qué se mostrará en la consola cuando "this" llama al siguiente método? (What is logged to the console as "this" when the following method was called?)

var myObj = {
  property : "that",
  whatsThis : function(that) {
    setTimeout(function () {
      console.log(this);
    }, 0);
  }
}

myObj.whatsThis("?");

Mi respuesta fue that en dado caso pensé que sería myObj pero no entiendo mucho el porqué es window la respuesta correcta, pongo un ejemplo donde sí me salió bien:

¿Qué es "this" cuando el siguiente metodo es llamado?(What is "this" when the following method was called?)

var myObj = {
  property : "that",
  whatsThis : function(that) {
    return this;
  }
}
myObj.whatsThis("?");

Yo puse myObj como respuesta y fue correcta y fue porque cuando retorno this me refiero al objeto e ignoro el parámetro que le paso porque no hago nada pero una duda acá: ¿si pusiera return this.property imprimiría "?" cierto? ya que le estoy cambiando el valor a la propiedad local, ¿no?


Bueno esa es mi duda la otra es

¿Por qué deberias usar prcesamiento asincrono en tu codigo JS?(Why should you make use of asynchronous processing in your JavaScript code?)

Learn more about synchronous and asynchronous requests here: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests

Note: There are 2 correct answers to this question.

  • Para acelerar las peticiones en el servidor cuando no necesitan autorizacion en el servidor - To speed up server requests as they do not need authorization checks on the server

  • Para optimizar la carga de recursos y tareas en paralelo - To optimize resource loading and parallelize tasks Correct!

  • Para evitar que el servdor colapse con multiples peticiones - To avoid server crashes due to multiple requests Your Answer

  • Para evitar que la intefaz de usuario no sea responsive durante la ejecucion de tareas - To avoid your UI becoming unresponsive due to long-running tasks (Correct)

Esa sí es como más teórica y si tiene sentido se supone que con el procesamiento asincrónico es para que vayan cargando otros procesos sin congelarse la pantalla, ¿no? ¿Y si se congela la pantalla se daña e responsive? O no entendí mucho eso último solo ahí me equivoqué.

Disculpen de antemano la traduccion hay cosas que no se traducir muy bien jeje

5
  • 1
    Deberías traducir las preguntas del inglés al español. No todos los usuarios las van a entender. Además, te recomiendo que busques en el sitio, estoy casi seguro de que otro usuario hizo la misma pregunta hace unos meses (quizás tomando el mismo examen o uno parecido)
    – Alvaro Montoro
    Commented el 10 ene. 2018 a las 13:42
  • ok lo traducire yo tampoco soy experto pero lo hare y es un examen del curso de open sap Desarrollo de Apps con SAPUI5 Commented el 10 ene. 2018 a las 14:13
  • No encuentro la pregunta a la que hacía referencia. Hay algunas en las que hay un caso parecido (en el que this pasa a ser window por el contexto), pero no encuentro exactamente la que te decía.
    – Alvaro Montoro
    Commented el 10 ene. 2018 a las 14:38
  • @AlvaroMontoro Yo llevo un tiempo buscando una pregunta bien hecha precisamente para soltar un tocho (una laaarga respuesta) para este tema (this, no pun intended) y creo que no hay ninguna anterior tan directa. Commented el 10 ene. 2018 a las 15:12
  • La última se refiere a que mientras el servidor ejecuta la tarea y el cliente espera la respuesta, el usuario puede seguir haciendo otras actividades sin tener que esperar a dicha respuesta.
    – Yikarus
    Commented el 10 ene. 2018 a las 18:28

2 respuestas 2

4

En este caso:

var myObj = {
  property : "that",
  whatsThis : function(that) {
    setTimeout(function() {
      console.log(this);
    }, 0);
  }
};

myObj.whatsThis("?");

Te está devolviendo el objeto window ya que en la función dentro de setTimeout() te estás cargando el contexto de la antigua función, por lo tanto no lo estás heredando y te está devolviendo el objeto window, pero fíjate en el ejemplo que te voy a poner a continuación, es prácticamente lo mismo pero con un resultado completamente distinto:

var myObj = {
  property : "that",
  whatsThis : function(that) {
    setTimeout(() => {
      console.log(this);
    }, 0);
  }
};

myObj.whatsThis("?");

Si te fijas bien el resultado es el objeto myObj, pero... ¿por qué? Si te fijas bien he declarado la función usando una sintaxis algo distinta, se llaman funciones flecha, las cuales NO crean un nuevo contexto, por lo tanto el resultado te devuelve myObj en vez de el objecto window ( en el ejemplo actual, pueden existir otro tipo de situaciones en las que no tendría por qué ser el objeto window ).

En cuanto a esta otra pregunta:

var myObj = {
  property : "that",
  whatsThis : function(that) {
    return this;
  }
}
myObj.whatsThis("?");

¿si pusiera return this.property imprimiría "?" cierto? ya que le estoy cambiando el valor a la propiedad local, ¿no?

No, si escribes como indicas return this.property te devolvería "that", para que te devolviera el parámetro que le has mandado a la función deberías escribir return that;

//usando return this.property;
var myObj = {
  property : "that", //<<<<
  whatsThis : function( that ) {
    return this.property;
  }
}

console.log( myObj.whatsThis("?") );

//Usando return that;
var myObj = {
  property : "that",
  whatsThis : function( that ) {
    //                  ^^^^
    return that;
  }
}

console.log( myObj.whatsThis("?") );

Espero haberte resuelto las dudas, en cuanto al procesamiento asíncrono es un tema muy amplio, es mejor que te vayas informando poco a poco por internet sobre este tema. Te dejo este post en español que está bastante bien.

2

Sobre la primera pregunta, analicemos el flujo y te darás cuenta de qué pasa:

1 var myObj = {
2   property : "that",
3   whatsThis : function(that) {
4     setTimeout(function () {
5       console.log(this);
6     }, 0);
7   }
8 }
9 myObj.whatsThis("?");
  • Las líneas 1-8 declaran un objeto que tiene un atributo string y otro atributo que es una función, por tanto es un método del objeto. Esto es obvio, pero ya puestos a explicar el código, lo explicamos todo.

    1. La línea 9 llama al método con el parámetro '?'. Por tanto el parámetro that vale '?' (línea 3).
    2. El contexto (this) dentro del método durante la ejecución es myObj.
    3. La línea 4 llama a setTimeout, pasando como función el código: function() {console.log(this);}

    4. setTimeout pone en la cola de ejecución la función declarada. Puesto que el tiempo de espera es 0, en cuanto acabe el hilo de ejecución principal se ejecutará.

    5. Termina el hilo principal.
    6. El intérprete de Javascript busca lo que esté pendiente de ser ejecutado, encuentra la función y la ejecuta en el contexto global, por tanto thises window. Si hubiésemos usado bind o hubiésemos declarado la función usando la notación "flecha" (fat arrow), el contexto se habría mantenido:

var myObj = {
  property : "that",
  whatsThis : function(that) {
    function fn() {
      console.log(this);
    }
    setTimeout(fn.bind(this), 0);
  }
}

myObj.whatsThis("?");


var myObj2 = {
  property : "that2",
  whatsThis : function(that) {
   
    setTimeout(()=> console.log(this), 0);
  }
}

myObj2.whatsThis("?");

Para tu segunda pregunta, imagina que tienes un código que hace algo como

for (let i=0,i<99999,i++) {
  miFuncion(i); //función que tarda una 0.01s en ejecutarse
}

Puesto que Javascript no es multihilo, durante unos 1000 segundos tu navegador estaría congelado, el usuario podría pulsar botones y no pasaría nada.

Pero si puedes hacer algo como:

for (let i=0,i<99999,i++) {
  setTimeout(()=>miFuncion(i),0) //función que tarda una 0.01s en ejecutarse
}

Resulta que tienes una cola de ejecución de 99999 funciones, pero entre cada una de ellas el navegador tiene la opción de responder a los eventos del usuario de un modo relativamente rápido, con lo que no quedaría totalmente congelado, simplemente ralentizado. Es por eso que la ejecución asíncrona evita la falta de respuesta de la UI

Aquí tienes un ejemplo más corto, sólo congela durante 3 segundos:

function sleep(miliseconds) {
   var currentTime = new Date().getTime();

   while (currentTime + miliseconds >= new Date().getTime()) {
   }
}

$('#sinc').on('click',function () {
  for (let i=0;i<300;i++) {
    sleep(10);
  }
});

$('#sinc').on('click',function () {
  for (let i=0;i<300;i++) {
    setTimeout(sleep(10));
  }
});
$('#test').on('click',function () {
  console.log('Has clickado en el test');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="sinc">Ejecución sinc</button>
<button id="asinc">Ejecución asinc</button>
<button id="test"> Clicka aquí para comprobar la respuesta de la interfaz</button>

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.