Detaillierte Erklärung der Funktionsklassifizierung und Beispiele für diese Zeigerfunktion in Javascript

Detaillierte Erklärung der Funktionsklassifizierung und Beispiele für diese Zeigerfunktion in Javascript

Drei Möglichkeiten zum Definieren von Funktionen in JS

Lassen Sie es mich anhand eines Beispiels erklären.

<Skript>
        //Methode1
        Funktion fn() {
            console.log('fn erstellt ');
        }
        //Methode2
        var fn2 = Funktion () {
            console.log('fn2 erstellt');
        }
        //Methode3
        var fn3 = neue Funktion('test', 'console.log(test);');
        fn3('fn3-Test');
        console.dir(fn3);
        console.log(fn3 Instanz des Objekts);
    </Skript>

Durch Ausführen des obigen Beispiels wird bewiesen, dass Funktionen auch Objekte sind. Sie können new + Konstruktor verwenden, um eine Instanz zu erstellen. Die dritte Methode hat eine geringe Ausführungseffizienz.

Funktionsprototypenkette

Aus den Ergebnissen können wir ersehen, dass das __proto__ des Funktionsprototypobjekts auf das Objekt verweist.

Klassifizierung und Aufrufmethoden von Funktionen in JS

Lassen Sie es mich anhand eines Beispiels erklären.

<Skript>
        //Funktionsklassifizierung und Aufrufmethode //Methode 1 Gewöhnliche Standardfunktion, diese zeigt auf das Fenster
        Funktion fn() {
            Konsole.log('fn1' + dies);
        }
        fn(); //Im Wesentlichen window.fn(); Globale Funktionen sind Mitglieder von window //Methode 2 Objektmethode, die auf den Aufrufer o zeigt
        var o = {
            sagHallo: Funktion () {
                Konsole.log('fn2'+dies);
            }
        }
        o.sagHallo();

        //Modus 3 Der Konstruktor this zeigt auf das neu erstellte Objekt, hier auf star1
        Funktion Star(Benutzername){
            this.username = Benutzername;
        }
        var star1 = neuer Stern('ldh');

        //Methode 4: Binden Sie die Ereignisfunktion this an den Funktionsaufrufer btn
        var fn = Funktion (){
            console.log('btn wurde angeklickt' + dies);
        }
        btn.onclick = fn;
        //Klicken Sie auf die Schaltfläche, um die Funktion aufzurufen //Methode 5 Timer-Funktion Der Timer ist eigentlich ein Mitglied des Fensters, also ist dies das Fenster
        setzeInterval(Funktion(){},1000);
        //Der Timer wird im eingestellten Zeitintervall aufgerufen //Methode 6: Führe die Funktion sofort aus. Dies ist ein Fenster. Gleich wie Methode 1 (function(){console.log('function executed')})();
//Execute muss nicht sofort aufgerufen werden</script>

Anhand der obigen Beispiele fasst der Autor im Wesentlichen die Verwendung von Funktionen zusammen, die er versteht. Durch den Vergleich von Methode 4 und Methode 6

  • Wir können erkennen, dass das Hinzufügen von () nach der Funktion einen sofortigen Aufruf anzeigt. Ohne () zeigt es einen Funktionszeiger an, der lediglich anzeigt, dass die Funktion die Funktion nicht aufruft.
  • Dies weist auf das Problem hin. Denken Sie daran, dass dies auf den Anrufer verweist

Ändern Sie die drei Funktionen, auf die dies verweist

Dieses Zeigen stellt ein sehr wichtiges Problem in JS dar. In der obigen Funktionsklassifizierung haben wir bereits eine systematische Analyse durchgeführt. Im Folgenden werden die drei Funktionen behandelt, die den this-Zeiger verändern.

Anruf

Ändern Sie die Instanz der übergeordneten Klasse in eine Instanz der untergeordneten Klasse, um die Attributvererbung zu implementieren.

<Skript>
        //Funktion aufrufen 
        Funktion Vater(Benutzername, Alter) {
            this.username = Benutzername;
            dieses.Alter = Alter;
        }

        Funktion Sohn (Benutzername, Alter, Geschlecht) {
            Father.call(this, username, age); //Erbe die Eigenschaften der übergeordneten Klasse this.gender = gender;
        }
    </Skript>

anwenden

Der Unterschied zwischen „Apply“ und „Call“ besteht darin, dass der Parameter ein Array (Pseudo-Array) ist. Innerhalb von apply wird das Array in Elemente aufgeteilt

Verwenden Sie hauptsächlich das Math-Objekt Math.max.apply(Math, [4324, 45, 342, 23])

<Skript>
        //Funktion anwenden 
        var o = {
            Benutzername: „Testbenutzer“
        };
        Funktion fn(arr) {
            Konsole.log(arr);
            für (sei i = 0; i < arr.length; i++) {
                Konsole.log(arr[i]);

            }
            konsole.log(dies);
        }

        fn.apply(o, [23, 43]);
        Konsole.log(Math.max(43, 45, 243, 342));
        console.log(Math.max.apply(Math, [4324, 45, 342, 23])); 
    </Skript>

binden

Ändern Sie nur die Referenz davon, ohne die Funktion aufzurufen

Verwenden Sie diese Option, um das gebundene Ereignis zu ändern, Fall

<Text>
    <button>klick mich</button>
    <button>klick mich</button>
    <button>klick mich</button>
    <Skript>
        //Bind-Funktion
        //Fall: Implementieren Sie mehrere Schaltflächen zum Senden von Bestätigungscodes und senden Sie diese dann 3 Sekunden später erneut. var btns = document.querySelectorAll('button');
        für (lass i = 0; i < btns.Länge; i++) {
            btns[i].onclick = Funktion () {
                dies.deaktiviert = wahr;
                setzeTimeout(Funktion () {
                    this.disabled = false; //Ändern Sie dies, damit es auf btn zeigt, führen Sie es nach 3000 ms aus}.bind(this), 3000);
            }
        }        
    </Skript>
</body>

Zusammenfassen

Dies ist das Ende dieses Artikels über Funktionsklassifizierung und diese Zeiger in Javascript. Weitere relevante JS-Funktionsklassifizierung und diese Zeigerinhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung dieser Zeigerfunktion in JS
  • Detaillierte Erklärung dieses Zeigeproblems in der JavaScript-Funktion
  • Detaillierte Analyse des this-Pointing-Problems innerhalb der anonymen JS-Funktion
  • Vertieftes Verständnis des Umfangs der JS-Funktionen und dieses Hinweises
  • JavaScript lässt dies im Funktionsparameter in setInteval auf ein bestimmtes Objekt verweisen
  • Detaillierte Erklärung der JavaScript-Funktion dieses Zeigeproblems

<<:  Ein Bugfix für Tomcats automatisches Herunterfahren

>>:  Tutorial zum Deaktivieren und Aktivieren von Triggern in MySQL [Empfohlen]

Artikel empfehlen

JavaScript implementiert den Div-Maus-Drag-Effekt

In diesem Artikel wird der spezifische Code für J...

Native JS-Implementierung der Slider-Intervallkomponente

In diesem Artikelbeispiel wird der spezifische Co...

Zusammenfassung der Verwendung von TypeScript in React-Projekten

Vorwort Dieser Artikel konzentriert sich auf die ...

Detaillierte Erklärung zum MySQL-Datenarchivierungstool mysql_archiver

Inhaltsverzeichnis I. Überblick 2. pt-archiver Ha...

So implementieren Sie mehrere Parameter in el-dropdown in ElementUI

Aufgrund der zunehmenden Anzahl von Schaltflächen...

Implementierung der Installation von Docker in einer Win10-Umgebung

1. Rufen Sie die offizielle Docker-Website auf Ge...

Detaillierte Erklärung der Nginx-Konfigurationsdatei

Die Hauptkonfigurationsdatei von Nginx ist nginx....

Kompilieren Sie CPP-Dateien mit G++ in Ubuntu

Als ich die CPP-Datei zum ersten Mal mit G++ komp...