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

Detaillierte Erklärung der Meta-Tags (die Rolle der Meta-Tags)

Egal wie großartig Ihre persönliche Website ist, ...

Docker-Dateispeicherpfad, Port-Mapping-Betriebsmodus ändern

So erhalten Sie den Container-Startbefehl Der Con...

Probleme bei der Verwendung der Rich-Text-Bearbeitung mit Wangeditor in Vue

wangEditor ist ein webbasierter Rich-Text-Editor,...

Lösung für SQL Server-Datenbankfehler 5123

Weil ich ein Datenbank-Tutorial habe, das auf SQL...

Mehrere Möglichkeiten zum Kapseln von Breadcrumb-Funktionskomponenten in Vue3

Inhaltsverzeichnis Vorwort 1. Warum brauchen wir ...

Detaillierte Erläuterung der vier Transaktionsisolationsebenen in MySQL

Die Testumgebung dieses Experiments: Windows 10+c...

Erläuterung der Truncate Table-Verwendung

TRUNCATE-TABELLE Löscht alle Zeilen in einer Tabe...

js Canvas zur Realisierung des Gobang-Spiels

In diesem Artikel wird der spezifische Code der L...

So verbergen und fälschen Sie die Versionsnummer in Nginx

1. Verwenden Sie den Curl-Befehl für den Standard...

Detaillierte Erklärung des Vue-Mixins

Inhaltsverzeichnis Lokales Mixin Globale Mixins Z...

Erstellen Sie mit PS in zwei Minuten eine Homepage für eine XHTML+CSS-Website

Es gibt zu viele Artikel über Webstandards zur We...

Lösung für den Fehler beim Importieren von MySQL Big Data in Navicat

Die von Navicat exportierten Daten können nicht i...