Detaillierte Erklärung der JavaScript-Funktion dieses Zeigeproblems

1. Die Richtung davon in der Funktion

Die Referenz hierzu wird beim Aufruf der Funktion ermittelt. Verschiedene Aufrufmethoden bestimmen, wohin dies verweist, und verweisen im Allgemeinen auf den Anrufer.
Schauen wir uns das jetzt genauer an!

1. Gewöhnliche Funktionen

Funktion fn(){
            console.log('normale Funktion diese:' + diese);
        }
        fn()

Das Druckergebnis ist:

Es ist ersichtlich, dass beim Aufruf einer normalen Funktion dies auf das Fenster verweist

2. Konstruktor

Funktion Stern(){
            console.log('das ist das des Konstruktors:' + das);
        }
        neuer Stern ()

Das Druckergebnis ist:

Es ist ersichtlich, dass beim Aufruf einer Objektmethode dies auf das Instanzobjekt der Methode verweist.

3. Objektmethoden

 var o = {
            drucken: Funktion(){
                console.log('Objektmethode ist dies:'+dieses);
            }
        }
        o.drucken()

Das Druckergebnis ist:

Es ist ersichtlich, dass beim Aufruf einer Objektmethode diese auf das Objekt verweist, zu dem die Methode gehört.

4. Ereignisbindungsmethode

Wenn wir einer Schaltfläche ein Bindungsereignis hinzufügen, worauf verweist dieses dann?

Beispielsweise gibt es jetzt eine Schaltfläche, und jetzt fügen wir ihr wie folgt ein Klickereignis hinzu:

<Text>
    <button>Schaltfläche</button>
    <Skript> 
	var btn = document.querySelector('Schaltfläche');
	btn.onclick = Funktion(){
    	console.log('dieses des Bindungsereignisses:'+dieses);
	}
    </Skript>
</body>

Wenn wir auf die Schaltfläche klicken, erhalten wir:

Es ist ersichtlich, dass dies beim Aufrufen des Bindungsereignisses auf das Bindungsereignisobjekt verweist.

5. Timerfunktion

Schreiben Sie eine Timerfunktion und rufen Sie sie nach 1 Sekunde auf.

Fenster.setTimeout(Funktion(){
            console.log('Timer ist dies:'+dies);
        },1000)

Das Druckergebnis ist:

Es ist ersichtlich, dass beim Aufruf der Timerfunktion dies auf das Fenster verweist.

6. Funktion sofort ausführen

Definieren Sie eine Funktion, die sofort ausgeführt werden soll:

(Funktion(){
            console.log('this:'+this der Funktion, die sofort ausgeführt werden soll);
        })();

Das Druckergebnis ist:

Es ist ersichtlich, dass dies auf das Fenster verweist, wenn der Funktionsaufruf sofort ausgeführt wird.

Zusammenfassend können wir feststellen:

2. Ändern Sie den this-Zeiger innerhalb der Funktion

In einer Funktion ist der this-Zeiger jedoch nicht statisch. Wir können den this-Zeiger durch einige Methoden ändern, hauptsächlich durch die folgenden Methoden. Zuvor haben wir bei der Zusammenfassung der Frage, wohin dies im Prototypobjekt verweist, die Call-Methode und die Apply-Methode erwähnt. Ich werde sie hier nicht wiederholen und nur Beispiele geben.

1. Methode aufrufen

Definieren Sie zunächst ein Objekt und eine Funktion.

 var o = {
            Name: "xl"
        }
        Funktion fn(){
            konsole.log(dies);
        }

Dies ist derzeit eine normale Funktion. Wie bereits erwähnt, zeigt dies einer normalen Funktion auf windiw. Wenn wir dies nun auf das o-Objekt zeigen möchten, sollten wir:

fn.call(o)

Das ausgedruckte Ergebnis lautet:

dies weist auf eine erfolgreiche Änderung hin.

2. Methode anwenden

Gleiche Methode wie oben.

var o = {
            Name:'xl'
        }
        Funktion fn(){
            konsole.log(dies);
        }
        fn.apply(o);

Das Druckergebnis ist:

3. Bindemethode

Die Methode bind() ruft die Funktion nicht auf. Aber dieser Zeiger kann innerhalb der Funktion geändert werden.

Grammatik:

Spaß.binden(diesesArg, arg1, arg2, …) 

thisArg: der this-Wert, der angegeben wird, wenn die fun-Funktion ausgeführt wird arg1, arg2: andere übergebene Parameter Gibt eine Kopie der ursprünglichen Funktion zurück, die mit dem angegebenen this-Wert und den Initialisierungsparametern transformiert wurde

Wenn wir also nur den This-Zeiger ändern und die Funktion nicht aufrufen möchten, können wir „Bind“ verwenden.

Wie folgt (immer noch unter Verwendung des obigen Beispiels):

 var o = {
            Name:'xl'
        }
        Funktion fn(){
            konsole.log(dies);
        }
        var f = fn.bind(o);
       F();

Das Druckergebnis ist:

Hierbei ist zu beachten: Da die Methode bind() keine Funktion aufruft, wird nach der Änderung des this-Zeigers eine neue Funktion zurückgegeben, sodass wir diese neue Funktion einem f zuweisen und sie dann über f aufrufen können.

3. Aufruf der Apply-Bind-Zusammenfassung

1. Ähnlichkeiten

Sie können diesen Zeiger innerhalb der Funktion ändern.

2. Unterschiede

• call und apply wird die Funktion aufgerufen und der This-Zeiger innerhalb der Funktion geändert.
  
• -Die von -call und apply übergebenen Parameter sind unterschiedlich. Call übergibt Parameter in der Form aru1, aru2..., während apply in der Array-Form [arg] vorliegen muss.
• bind ruft die Funktion nicht auf, kann aber den this-Zeiger innerhalb der Funktion ändern.

3. Anwendungsszenarien

• call bewirkt oft Vererbung.
• apply wird oft mit Arrays verknüpft. Beispielsweise können wir mathematische Objekte verwenden, um die Maximal- und Minimalwerte eines Arrays zu realisieren.
• bind ruft keine Funktion auf, aber Sie möchten den this-Zeiger trotzdem ändern. Ändern Sie beispielsweise den this-Zeiger innerhalb eines Timers.

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!