¿Por qué un trabajo de contador y el otro no? (Los cierres?)

votos
0

Tengo dos preguntas sobre este contraejemplo.

  1. ¿Por qué no addVersionOne trabajo? ¿Por qué se devuelve el código real en lugar de un número?
  2. ¿Cómo funciona addVersionTwo? ¿No counterse restablece de nuevo a 0cada vez que la función se ejecuta?

const addVersionOne = function() {
  let counter = 0;
  return function() {
    counter += 1;
    return counter;
  }
}

var addVersionTwo = (function () {
  let counter = 0;
  return function() {
    counter += 1; 
    return counter;
  }
})();

function writeVersionOne(){
  document.getElementById(addVersionOne).innerHTML = addVersionOne();
}

function writeVersionTwo(){
  document.getElementById(addVersionTwo).innerHTML = addVersionTwo();
}
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <meta http-equiv=X-UA-Compatible content=IE=edge>
  <title>Page Title</title>
  <meta name=viewport content=width=device-width, initial-scale=1>
  <button type=button onclick=writeVersionOne()>addVersionOne</button>
  <button type=button onclick=writeVersionTwo()>addVersionTwo</button>
  <p id=addVersionOne>0</p>
  <p id=addVersionTwo>0</p>
  <script src=main.js></script>
</head>
<body>
  
</body>
</html>

Publicado el 27/11/2018 a las 17:48
fuente por usuario
En otros idiomas...                            


2 respuestas

votos
0

Debido a que el valor de retorno de la addVersionOne función es una función y es obvio. Pero addVersionTwo función es en realidad el resultado de una llamada a una función que devuelve una función. Así, addVersionTwo es en realidad la función a continuación:

return function() {
    counter += 1; 
    return counter;
}

se podría definir la addVersionTwo función como sigue:

var counter = 0;

var addVersionTwo = function() {
    counter += 1; 
    return counter;
};
Respondida el 27/11/2018 a las 17:57
fuente por usuario

votos
1

Cuando se ejecuta este:

addVersionOne()

Cual es el resultado? Bueno, vamos a ver lo que devuelve la función:

//...
return function() {
    counter += 1;
    return counter;
}

Devuelve una función. Esa función no se ejecuta, se acaba de regresar. La función en sí se establece como el innerHTMLde su elemento de destino.

Pero lo que hace este retorno ?:

addVersionTwo()

Observe cómo su segunda versión envuelve todo entre paréntesis y luego añade otro conjunto de paréntesis, a invocar la función devuelta. Así, mientras que la variable addVersionOnees una función que devuelve una función, la variable addVersionTwoes que la función devuelve. Y que devuelve un valor:

//...
return counter;

no está siendo contador a cero de nuevo a 0 cada vez que se ejecute la función?

¿Qué "función" se está refiriendo? Tiene varios. Esta función se ejecuta una vez al cargarse la página:

function () {
    let counter = 0;
    return function() {
        counter += 1; 
        return counter;
    }
}

A continuación, devuelve una función que se almacena en la addVersionTwovariable. Esa función es:

function() {
    counter += 1; 
    return counter;
}

Y no, esa función no se restablece countera 0cada vez que se ejecuta.

Respondida el 27/11/2018 a las 17:57
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more