Heim > Artikel > Web-Frontend > Wie kann das Überschreiben mithilfe eines sofort aufgerufenen Funktionsausdrucks in JavaScript verhindert werden?

Wie kann das Überschreiben mithilfe eines sofort aufgerufenen Funktionsausdrucks in JavaScript verhindert werden?

PHPznach vorne: 2023-09-03 19:13:02789Durchsuche

如何在 JavaScript 中使用立即调用函数表达式来防止覆盖？

JavaScript ermöglicht Entwicklern das Hinzufügen von Funktionalität und Verhalten zu Webseiten. Entwickler müssen mehrere Funktionen und Variablen erstellen, um verschiedenen Teilen der Webseite Funktionalität hinzuzufügen.

Bei der Entwicklung von Echtzeitanwendungen arbeiten mehrere Entwickler am selben Projekt. Daher ist es notwendig, bei der Arbeit mit mehreren Entwicklern ein versehentliches Überschreiben von Funktionen und Variablen zu vermeiden. In diesem Tutorial erfahren Sie, wie Sie das Überschreiben mithilfe sofort aufgerufener Funktionsausdrücke verhindern können.

Frage umschreiben

Zum Beispiel arbeiten zwei Kollegen am selben Projekt und beide definieren die Funktion printAge() im Code und führen den Code zusammen. Jetzt führt der Browser nur noch die zuletzt definierte Funktion aus, da diese alle anderen Funktionsdefinitionen mit demselben Namen überschreibt. Infolgedessen stellen Benutzer manchmal unerwartetes Verhalten von Webseiten fest. Darüber hinaus kann dies bei Variablennamen passieren.

Beispiel (Abdeckungsproblem)

Im folgenden Beispiel haben wir zwei Variablen mit demselben Namen definiert. Wir zeigen Variablenwerte auf der Webseite an. In der Ausgabe kann der Benutzer beobachten, dass die zweite „a“-Variable den Wert der ersten „a“-Variablen überschreibt.

<html>
<body>
   <h2> Visualizing the overriding in JavaScript </h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      var a = "Hello World!";
      var a = "Hi World!";
      output.innerHTML = "The value of a is " + a;
   </script>
</body>
</html>

Lösung zum sofortigen Aufrufen der Funktion, um ein Überschreiben zu verhindern

JavaScript-Funktionen verfügen über den Funktionsumfang von Variablen, die innerhalb der Funktion definiert sind. Unabhängig davon, welche Variablen wir innerhalb der Funktion definieren, können wir außerhalb der Funktion nicht darauf zugreifen. Daher können wir Variablen definieren, deren Gültigkeitsbereich auf die Funktion beschränkt ist.

Wir können einen sofortigen Funktionsaufruf verwenden, um das Umschreiben von Funktionen zu lösen, d. h. die Funktion sofort nach der Definition ausführen. Daher müssen wir keine Funktionsnamen definieren und ein Überschreiben wird verhindert.

Grammatik

Benutzer können die folgende Syntax verwenden, um Überschreibungen in JavaScript zu verhindern, indem sie einen sofortigen Funktionsaufruf verwenden.

(function () {
   // write JavaScript code here. 
})();

In der obigen Syntax haben wir den Funktionsausdruck in die Klammern eingefügt. Zusätzlich haben wir nach der Funktionsdefinition Klammern eingefügt, um die Funktion sofort aufzurufen.

Beispiel (Sofortiges Überschreiben der Anruffunktion verhindern)

Im folgenden Beispiel definieren wir zwei Funktionen, die sofort aufgerufen werden. In jeder Funktion erstellen wir eine Objektvariable „obj“ und speichern die Eigenschaften id, user und age. Zusätzlich speichern wir die Funktion printAge() im Objekt.

Die printAge()-Funktionen der beiden Objekte drucken unterschiedliche Nachrichten. Anschließend speichern wir diese beiden Objekte im Fensterobjekt, um global darauf zugreifen zu können. Schließlich haben wir die printAge()-Methoden beider Objekte ausgeführt und der Benutzer kann beobachten, dass die ursprüngliche Nachricht gedruckt wurde, ohne sich gegenseitig zu überschreiben.

<html>
<body>
   <h3> Preventing the overriding <i> using the Immediately Invoked Function Expression </i> in JavaScript
   </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      (function (window) {
         var obj = {};
         obj.id = "123";
         obj.user = "Shubham";
         var age = "Shubham's Age is 23. <br>";
         obj.printAge = function () {
            output.innerHTML += age;
         }
         window.user1 = obj;
      })(window);
      (function (window) {
         var obj = {};
         obj.id = "342";
         obj.user = "Mukund";
         var age = "Mukund's Age is 18. <br>";
         obj.printAge = function () {
            output.innerHTML += age;
         }
         window.user2 = obj;
      })(window);
      user1.printAge();
      user2.printAge();
   </script>
</body>
</html>

Beispiel

In diesem Beispiel definieren wir auch zwei Funktionsausdrücke, die sofort aufgerufen werden. Im ersten Ausdruck definieren wir das Lebensmittelobjekt. Zusätzlich haben wir die Methoden setId() und setName() für das Food-Objekt definiert und im Fensterobjekt gespeichert.

Im zweiten Funktionsausdruck definieren wir erneut die Methoden setId() und setName() und speichern sie im watch()-Objekt. Anschließend verwenden wir die Uhren- und Lebensmittelobjekte als Referenzen, um auf verschiedene Methoden zuzugreifen. In der Ausgabe können wir sehen, dass die ursprüngliche Nachricht gedruckt wird, ohne sie zu überschreiben.

<html>
<body>
   <h3> Preventing the overriding <i> using the Immediately Invoked Function Expression </i> in JavaScript </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      (function (window) {
         // preparing food data
         var food = {};
         var setId = function () {
            return Date.now();
         }
         var setName = function () {
            return "Apple";
         }
         window.food = {
            setId: setId(),
            setName: setName()
         };
      })(window);
      (function (window) {
      
         // preparing watch data
         var watch = {};
         var setId = function () {
            return Date.now();
         }
         var setName = function () {
            return "Titan";
         }
         window.watch = {
            setId: setId(),
            setName: setName()
         };
      })(window);
      
      // printing values of object
      output.innerHTML = "Food Id: " + food.setId + "<br/>" + "Food Name: " + food.setName + "<br/>" + "Watch Id: " + watch.setId + "<br/>" + "Watch Name: " + watch.setName;
   </script>
</body>
</html>

Wir haben gelernt, unmittelbare Funktionsausdrücke zu verwenden, um Überschreibungen bei der Arbeit mit JavaScript-Code zu verhindern. Die Idee besteht darin, Variablen im Funktionsbereich zu definieren und global über ein bestimmtes globales Objekt darauf zuzugreifen, das keine überschreibenden Namen haben sollte.

Der Hauptvorteil der Verwendung sofort aufgerufener Funktionsausdrücke zur Verhinderung des Überschreibens besteht darin, eine globale Verschmutzung von Variablennamen zu vermeiden. Darüber hinaus ermöglicht es uns, den Code wartbar zu machen und die Wiederverwendbarkeit des Codes zu verbessern.

Das obige ist der detaillierte Inhalt vonWie kann das Überschreiben mithilfe eines sofort aufgerufenen Funktionsausdrucks in JavaScript verhindert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript 对象作用域

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie stelle ich den Drehwinkel eines Rechtecks mit FabricJS ein?Nächster Artikel：Wie stelle ich den Drehwinkel eines Rechtecks mit FabricJS ein?

In Verbindung stehende Artikel

Mehr sehen