Ist die Funktionsumfangsvariable nicht beschreibbar

Question

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

Warum wird die Zählervariable nach der ersten Iteration nicht inkrementiert? Ausgabe ist immer 1.

Answer 1

Die Funktion add gibt die Variable counter zurück, die in der Funktion add definiert ist. Der Gültigkeitsbereich der Variablen counter ist lokal zu funktionieren, was bedeutet, dass bei jedem Aufruf der Funktion eine neue Variable counter erstellt und dann auf Null initialisiert und dann der Zähler inkrementiert wird.

Wenn Sie nach einer Zählerimplementierung suchen, müssen Sie immer dieselbe counter Variable referenzieren und diese Variable erhöhen. Dies kann durch Verwendung von Closure implementiert werden.

Beispiel: Im folgenden Beispiel gibt es 2 Funktionen, 1 innerhalb des anderen. Die innere Funktion behält einen Verweis auf die äußere Funktion Umgebung bei, die in diesem Fall die Variable counter enthält. Selbst nachdem die Steuerung die Funktion add verlässt, behält die innere Funktion einen Verweis auf die Variable counter bei.

var add = (function(){ 
 
    var counter = 0; 
 
    return function(){ 
 
    return ++counter; 
 
    } 
 
})(); 
 

 
document 
 
    .querySelector('#btn') 
 
    .addEventListener('click', function(){ 
 
    document.querySelector('#output').textContent = add(); 
 
    });

<div id="output">0</div> 
 
<button id="btn">Increment</button>

Answer 2

Sie können den Zähler eine globale Variable machen und dann die Add-Funktion aufrufen:

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

Answer 3

Dies ist eine Scoping-Ausgabe. Ändern Sie ihn auf

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

Oder wenn Sie in der Lage sein wollen, zu tun() hinzufügen, verwenden Sie eine verschachtelte Funktion

function adder() { 
    let counter = 0; 
    return function plus() { 
    return counter += 1; 
    }; 
} 
let add = adder(); 
console.log(add()); 
console.log(add()); 
console.log(add());