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.
La línea 9 llama al método con el parámetro '?'
. Por tanto el parámetro that
vale '?'
(línea 3).
El contexto (this
) dentro del método durante la ejecución es myObj
.
La línea 4 llama a setTimeout, pasando como función el código: function() {console.log(this);}
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á.
Termina el hilo principal.
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 this
es 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, 1000s 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