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

Zusammenfassung der Situationen, in denen MySQL-Indizes nicht verwendet werden

Indextypen in MySQL Im Allgemeinen können sie in ...

MySQL-Ansichtsprinzipien und grundlegende Bedienungsbeispiele

Dieser Artikel veranschaulicht anhand von Beispie...

Beispielanalyse der MySQL-Indexabdeckung

Dieser Artikel beschreibt die MySQL-Indexabdeckun...

Der Unterschied zwischen ENTRYPOINT und CMD in Dockerfile

Im Lernprogramm zum Docker-System haben wir geler...

Grundlegende Nutzungsdetails zur Vue-Komponentenbildung

Inhaltsverzeichnis 1. Was ist Komponentenbildung?...

Beschreiben Sie kurz den Unterschied zwischen Redis und MySQL

Wir wissen, dass MySQL ein persistenter Speicher ...

Eine kurze Diskussion über das Funktionswissen von Python

Inhaltsverzeichnis Zwei Hauptkategorien von Funkt...

Detaillierte Erläuterung der geplanten MySQL-Aufgaben (Ereignisereignisse)

1. Kurze Einführung in die Veranstaltung Ein Erei...

Lösung für Docker-Container, der Schriftarten wie Songti nicht erkennt

Problemhintergrund: Wenn Sie Docker zum Bereitste...

So implementieren Sie eine verschachtelte if-Methode in Nginx

Nginx unterstützt weder verschachtelte if-Anweisu...

Implementieren von Rechnerfunktionen mit dem WeChat-Applet

Dieser Artikel ist ein einfacher Rechner, der mit...

js zur Realisierung einer einfachen Warenkorbfunktion

In diesem Artikelbeispiel wird der spezifische Co...

Implementierung der Docker-Bereitstellung von Django+Mysql+Redis+Gunicorn+Nginx

I. Einleitung Die Docker-Technologie erfreut sich...

JavaScript Canvas realisiert dynamische Punkt- und Linieneffekte

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