Einführung in Probleme bei der Registrierung von Veranstaltungen, die durch js-Closure_Grundkenntnisse verursacht werden-js-Tutorial-php.cn

Einführung in Probleme bei der Registrierung von Veranstaltungen, die durch js-Closure_Grundkenntnisse verursacht werden

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:07 PM

js闭包

Hintergrund: Ich habe in meiner Freizeit ein paar Artikel über js-Bereichsketten und -Verschlüsse gelesen und zufällig ein Problem gesehen, auf das ich zuvor gestoßen bin, nämlich das Ereignis „for-loop Register“. Treiber für den Dom-Knoten finden Sie im folgenden Code:

<!DOCTYPE html>
<html>
  <head>
    <title>js闭包</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <button id="anchor1">1</button>
    <button id="anchor2">2</button>
    <button id="anchor3">3</button>
    <script type="text/javascript" src="jquery-1.12.1.js"></script>
    <script type="text/javascript">
      function pageLoad(){
        for (var i = 1; i <=3; i++) { 
          var anchor = document.getElementById("anchor" + i);
          anchor.onclick = function () {
            console.log("anchor"+i);
          } 
        } 
      } 
      window.onload = pageLoad; 
    </script>
  </body>
</html>

Nach normaler Denkweise sollte das Ergebnis sein, dass beim Klicken auf drei Schaltflächen jeweils „Anker1“, „Anker2“ und „Anker3“ angezeigt werden. Ich dachte das zu Beginn des Zeitraums, aber das Ergebnis ist egal Wenn Sie auf die Schaltfläche klicken, wird „anchor4“ angezeigt.

Warum ist das so? Machen Sie sich keine Sorgen, lassen Sie es uns langsam analysieren. Es beinhaltet das Wissen über die Gültigkeitskette und den Abschluss von js, daher werde ich es hier nicht im Detail vorstellen.

Schauen wir uns zunächst „anchor.onclick“ an. Was ist das? Das ist ein DOM-Level-0-Unsinn. Ist der Blogger ein Psychopath? 🎜 >

ist eine Deklaration eines Event-Handlers, genau wie var name="Xiao Ming". Dies ist der Schlüssel, den wir noch nicht ausgeführt haben:

function pageLoad(){
     for (var i = 1; i <=3; i++) { 
       var anchor = document.getElementById("anchor" + i);
         anchor.onclick = function () {
            console.log("anchor"+i);
         } 
         if(i==2){
           debugger;//我们在这里debugger一下，然后在控制台手动触发#anchor1和#anchor2的点击事件
         }
     } 
 } 
 window.onload = pageLoad;

Sehen Sie, wir verwenden den Debugger, um die Schleife zu stoppen, wenn i==2, und gehen dann zur Konsole, um die Klickereignisse von #anchor1 und #anchor2 manuell auszulösen, und die Konsole gibt „anchor2“ aus.

Die ganze Logik sieht ungefähr so aus: Anchor.onclick speichert immer die Referenz von i und i ändert sich während der Schleife ständig von i=1 zu i=4; das Wort „einmal“),

Es gibt drei Fälle von 1, 2 und 3, aber i wird schließlich zu 4, sodass unabhängig davon, auf welche Schaltfläche geklickt wird, „anchor4“ ausgegeben wird

Fazit: Das Wissen über die Gültigkeitskette und den Abschluss in js ist sehr wichtig. Obwohl ich hier nicht darüber gesprochen habe, befürchte ich tatsächlich, dass es nicht klar erklärt wird und es wird jeden in die Irre führen

Die obige Einführung zu Problemen bei der Registrierung von Veranstaltungen, die durch js-Abschlüsse verursacht werden, ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe, dass Sie Script Home unterstützen.

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

Die Entwicklung von JavaScript: Aktuelle Trends und ZukunftsaussichtenApr 10, 2025 am 09:33 AM

Zu den neuesten Trends im JavaScript gehören der Aufstieg von Typenkripten, die Popularität moderner Frameworks und Bibliotheken und die Anwendung der WebAssembly. Zukunftsaussichten umfassen leistungsfähigere Typsysteme, die Entwicklung des serverseitigen JavaScript, die Erweiterung der künstlichen Intelligenz und des maschinellen Lernens sowie das Potenzial von IoT und Edge Computing.

Entmystifizieren JavaScript: Was es tut und warum es wichtig istApr 09, 2025 am 12:07 AM

JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.

Ist Python oder JavaScript besser?Apr 06, 2025 am 12:14 AM

Python eignet sich besser für Datenwissenschaft und maschinelles Lernen, während JavaScript besser für die Entwicklung von Front-End- und Vollstapel geeignet ist. 1. Python ist bekannt für seine prägnante Syntax- und Rich -Bibliotheks -Ökosystems und ist für die Datenanalyse und die Webentwicklung geeignet. 2. JavaScript ist der Kern der Front-End-Entwicklung. Node.js unterstützt die serverseitige Programmierung und eignet sich für die Entwicklung der Vollstapel.

Wie installiere ich JavaScript?Apr 05, 2025 am 12:16 AM

JavaScript erfordert keine Installation, da es bereits in moderne Browser integriert ist. Sie benötigen nur einen Texteditor und einen Browser, um loszulegen. 1) Führen Sie sie in der Browser -Umgebung durch, indem Sie die HTML -Datei durch Tags einbetten. 2) Führen Sie die JavaScript -Datei nach dem Herunterladen und Installieren von node.js nach dem Herunterladen und Installieren der Befehlszeile aus.

Wie sende ich Benachrichtigungen, bevor eine Aufgabe in Quartz beginnt?Apr 04, 2025 pm 09:24 PM

So senden Sie im Voraus Aufgabenbenachrichtigungen in Quartz Wenn der Quartz -Timer eine Aufgabe plant, wird die Ausführungszeit der Aufgabe durch den Cron -Ausdruck festgelegt. Jetzt...

Wie erhalten Sie in JavaScript Parameter einer Funktion auf einer Prototypkette in einem Konstruktor?Apr 04, 2025 pm 09:21 PM

So erhalten Sie die Parameter von Funktionen für Prototyp -Ketten in JavaScript in JavaScript -Programmier-, Verständnis- und Manipulationsfunktionsparametern auf Prototypungsketten ist eine übliche und wichtige Aufgabe ...

Was ist der Grund für das Versagen von Vue.js Dynamic Style -Verschiebung im WeChat Mini -Programm Webview?Apr 04, 2025 pm 09:18 PM

Analyse des Grundes, warum der dynamische Verschiebungsfehler der Verwendung von VUE.JS im WeChat Applet Web-View Vue.js verwendet ...

So implementieren Sie gleichzeitige GET -Anforderungen für mehrere Links in Tampermonkey und bestimmen die Rückgabergebnisse in Sequenz?Apr 04, 2025 pm 09:15 PM

Wie kann ich gleichzeitige Anfragen für mehrere Links und nach Abfolge der Rückgabeergebnisse beurteilen? In Tampermonkey -Skripten müssen wir oft mehrere Ketten verwenden ...

See all articles