Wie JavaScript-Abschlussfunktionen auf externe Variablen zugreifen_Javascript-Tipps

Ein Abschluss bezieht sich auf eine Funktion, die das Recht hat, auf Variablen im Bereich einer anderen Funktion zuzugreifen. Beim Bereichskonfigurationsmechanismus ist jedoch eines zu beachten: Der Abschluss kann nur den letzten Wert einer beliebigen Funktion erhalten Variable in der enthaltenden Funktion.

Zum Beispiel der folgende Fall:

function create(){
    var arr = new Array();  
 
    for (var i=0; i<10; i++){
        arr[i] = function(){
            return i;
        };  
    }
 
    return arr;
}
 
var c_arr = create();
 
for(var i=0; i<c_arr.length;i++){
    document.write("c_arr["+i+"] = "+c_arr[i]()+"<br />");    
}

Ausführungsergebnis:

Oberflächlich betrachtet scheint der von jeder Funktion zurückgegebene i-Wert unterschiedlich zu sein. Beispielsweise sollte der Wert von c_arr[0] 0 sein, der Wert von c_arr[1] sollte 1 sein und so weiter. Als Ergebnis gibt jede Funktion 10 zurück. Warum?

Da das aktive Objekt der Funktion create() in der Bereichskette jeder Funktion gespeichert ist, verweisen sie alle auf dieselbe Variable i. Wenn die for-Schleife endet, wird der Wert von i zu 10. Zu diesem Zeitpunkt verweist jede Funktion auf dasselbe Variablenobjekt, das die Variable i enthält.

Wir können erzwingen, dass sich der Abschluss wie erwartet verhält, indem wir eine weitere Domainnamenfunktion erstellen, sodass jede Position dem entsprechenden Wert entspricht.

function create(){
    var arr = new Array();  
 
    for (var i=0; i<10; i++){
        arr[i] = function(num){
            return function(){
                return num; 
            };
        }(i);   
    }
 
    return arr;
}
 
var c_arr = create();
 
for(var i=0; i<c_arr.length;i++){
    document.write("c_arr["+i+"] = "+c_arr[i]()+"<br />");    
}

Ausführungsergebnis:

Eine anonyme Funktion wird definiert und der Mechanismus zum Ausführen der anonymen Funktion wird dem Array sofort zugewiesen. Die anonyme Funktion hat hier einen Parameter num, der der von der endgültigen Funktion zurückzugebende Wert ist. Wir übergeben die Variable i beim Aufruf jeder Funktion. Da Funktionsparameter als Wert übergeben werden, wird der aktuelle Wert der Variablen i dem Parameter num zugewiesen. Innerhalb dieser anonymen Funktion wird ein Abschluss erstellt und zurückgegeben, der auf num zugreift. Auf diese Weise verfügt jede Funktion im arr-Array über eine Kopie ihrer eigenen num-Variablen, sodass sie unterschiedliche Werte zurückgeben kann.

Klassisches Beispiel

Sehen wir uns noch einmal ein klassisches Beispiel an. Angenommen, die Seite verfügt über eine Reihe von Schaltflächen-Tags. Wir verwenden ein Skript, um Klickereignisse an diese Schaltflächen-Tags zu binden und festzustellen, wie viele Tags angezeigt werden.

<meta charset="utf-8" />
 
<button>第一个</button>
<button>第二个</button>
<button>第三个</button>
<button>第四个</button>
 
 
<script type="text/javascript">
 
var obj = document.getElementsByTagName('button');
for(var i=0;i<obj.length;i++){
    obj[i].onclick = function(){
        alert(i);
    };  
}
 
</script>

Klicken Sie auf die einzelnen Ergebnisschaltflächen

Oberflächlich betrachtet scheint es, dass beim Klicken auf jedes Etikett eine andere Zahl angezeigt werden sollte

Das erste sollte mit 0;

erscheinen

Das zweite sollte mit 1;

erscheinen

Und so weiter.

Das Ergebnis ist jedoch, dass alle Schaltflächen 4 angezeigt werden, was offensichtlich nicht das gewünschte Ergebnis ist.

Lassen Sie uns das Programm ändern

<meta charset="utf-8" />
 
<button>第一个</button>
<button>第二个</button>
<button>第三个</button>
<button>第四个</button>
 
 
<script type="text/javascript">
 
var obj = document.getElementsByTagName('button');
for(var i=0;i<obj.length;i++){
    obj[i].onclick = function(num){
        return function(){
            alert(num);
        }       
    }(i);       
}
 
</script>

Klicken Sie auf das zweite

Klicken Sie auf das vierte

Wir müssen nur eine anonyme Funktion innerhalb der Funktion erstellen, genau wie im obigen Fall. Sie können eine anonyme Funktion implementieren, um die externe Variable i zu erfassen. Dadurch ist der i-Wert jeder Button-Bombe unterschiedlich.