Warum ist ein Zähler Arbeit und der andere nicht? (Closures?)

stimmen
0

Ich habe zwei Fragen zu diesem Gegenbeispiel.

  1. Warum nicht addVersionOne Arbeit? Warum kehrt er den eigentlichen Code anstelle einer Zahl?
  2. Wie funktioniert addVersionTwo arbeiten? Ist das nicht counterzu zurückgesetzt wird 0jedes Mal , wenn die Funktion ausgeführt wird?

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>

Veröffentlicht am 27/11/2018 um 17:48
quelle vom benutzer
In anderen Sprachen...                            


2 antworten

stimmen
0

Da der Rückgabewert der Funktion addVersionOne ist eine Funktion, und es ist offensichtlich. Aber addVersionTwo Funktion ist eigentlich das Ergebnis einer Funktionsaufruf, der eine Funktion zurückgibt. Also, addVersionTwo ist eigentlich die Funktion unten:

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

Sie können die Funktion addVersionTwo wie folgt definieren:

var counter = 0;

var addVersionTwo = function() {
    counter += 1; 
    return counter;
};
Beantwortet am 27/11/2018 um 17:57
quelle vom benutzer

stimmen
1

Wenn Sie dies ausführen:

addVersionOne()

Was ist das Ergebnis? Nun, lassen Sie uns sehen, was diese Funktion zurückgibt:

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

Es gibt eine Funktion. Diese Funktion wird nie ausgeführt, es ist nur zurückgegeben. Die Funktion selbst wird als die Menge innerHTMLfür Ihr Zielelement.

Aber was diese Rückkehr tut ?:

addVersionTwo()

Beachten Sie, wie Ihre zweite Version alles in Klammern hüllt und fügt dann einen weiteren Satz von Klammern die zurückgegebene Funktion aufzurufen. Während also die Variable addVersionOneeine Funktion ist , die eine Funktion gibt, die Variable addVersionTwoist die Funktion zurückgegeben. Und es gibt einen Wert:

//...
return counter;

Ist das nicht Zähler wird auf 0 zurückgesetzt, jedes Mal, wenn die Funktion ausgeführt wird?

Welche „Funktion“ beziehen Sie sich? Sie haben mehrere. Diese Funktion wird ausgeführt , wenn , wenn die Seite geladen wird :

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

Es gibt dann eine Funktion , die in dem gespeichert ist addVersionTwovariabel. Das Funktion ist:

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

Und nein, diese Funktion nicht zurückgesetzt counterzu 0jeder Zeit ausgeführt wird.

Beantwortet am 27/11/2018 um 17:57
quelle vom benutzer

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