Detaillierte Erklärung dieses Zeigeproblems in der JavaScript-Funktion

dieses Schlüsselwort

Welches Objekt ruft die Funktion auf und auf welches Objekt zeigt dies in der Funktion?

**Strenger Modus:** In der globalen Umgebung bezieht sich dies auf undefinierte

**Nicht strikter Modus: **In der globalen Umgebung bezieht sich dies auf Fenster

Global definierte Funktionen werden direkt aufgerufen, dies => Fenster

Funktion fn(){
	konsole.log(dies);
	// An dieser Stelle zeigt dies auf Fenster
}
fn();
//Entspricht window.fn()

Funktionsaufruf innerhalb eines Objekts, dies => Aufrufer

var obj = {
	fn:Funktion(){
		konsole.log(dies);
	}
}
obj.fn();
// Dies zeigt zu diesem Zeitpunkt auf obj

Timer-Verarbeitungsfunktion, dieses => Fenster

setzeTimeout(Funktion(){
	konsole.log(dies);	
},0)
// Zu diesem Zeitpunkt zeigt dies in der Timer-Verarbeitungsfunktion auf das Fenster

Ereignisbehandlungsfunktion, diese => Ereignisquelle

div.onclick = Funktion(){
	konsole.log(dies);
}
//Wenn Sie auf div klicken, zeigt dies auf div

Selbstaufrufende Funktion, dieses => Fenster

(Funktion () {
  console.log(dies)
})()
// An dieser Stelle zeigt dies auf Fenster

Ändern Sie dies, um auf Folgendes zu verweisen:

Wir haben gerade über die this-Zeiger in den grundlegenden Funktionsaufrufmethoden gesprochen. Wir haben auch drei Möglichkeiten, den this-Zeiger der Funktion selbst zu ignorieren und ihn auf andere Stellen zu richten. Diese drei Methoden sind call / apply / bind. Dabei handelt es sich um Methoden, die den Zeiger hiervon zwangsweise ändern.

• call/apply/bind wird nach dem Funktionsaufruf verwendet und der this-Zeiger der Funktion selbst kann ignoriert werden.
• Bei Verwendung von call und apply wird die Funktion automatisch sofort aufgerufen. Bei Verwendung von bind wird eine Funktion erstellt, die jedoch manuell aufgerufen werden muss.
  

Anruf

Syntax: fn.call (wohin dies im fn-Funktionskörper zeigt, arg1, arg2, …);

Funktion: Rufen Sie die gebundene Funktion fn auf, geben Sie ihren this-Zeiger an und übergeben Sie Parameter

Parameter:

• Der erste Parameter: dieser zeigt auf
• Die verbleibenden Parameter: Die Werte, die übergeben werden müssen, können mehrere sein, getrennt durch Kommas
  

Verwenden der Aufrufmethode ohne Übergabe von Parametern

Variablennummer = 666;

Funktion fn() {
  Konsole.log('num = ', diese.num);
}

fn.call(); // Zahl = 666

Verwenden Sie die Call-Methode, um dies anzugeben

Variablenname = "Rose";
var obj = {name:'Jack'};
Funktion fn(){
	konsole.log(dieser.name);
}
fn(); // Rose
fn.call(); // Rose
fn.call(obj); // Buchse

Verwenden Sie die Call-Methode, um dies anzugeben und Parameter zu übergeben

Variablenname = "Rack";
var obj = {name:'Jack'};
Funktion fn(a,b){
	konsole.log(dies,a,b);
}
fn(1,2); // Fenster 1 2
fn.call(obj,1,2); // Objekt 1 2
fn(1,3); // Fenster 1 3

anwenden

Die Apply-Methode akzeptiert ein Array mit mehreren Parametern.

Syntax: fn.apply (wobei dies im fn-Funktionskörper darauf zeigt, [arg1, arg2, ...]);

Funktion: Rufen Sie die gebundene Funktion fn auf, geben Sie ihren this-Zeiger an und übergeben Sie Parameter

Parameter:

• Der erste Parameter: das Objekt, auf das dieser zeigt
• Der zweite Parameter: ein Array mit mehreren Parametern
  

var obj = {name:'jack'};
Funktion fn(a,b){
	konsole.log(dies,a,b);
}
fn(1,2); // Fenster 1 2
fn.apply(obj,[1,2]); // Objekt 1 2

Zusammenführen von Arrays mit „Apply“

Verwenden Sie push, um Elemente an ein Array anzuhängen. Wenn das Argument ein Array ist, wird das Array als einzelnes Element hinzugefügt, anstatt jedes Element im Array hinzuzufügen. So erhalten wir ein Array innerhalb eines Arrays.

var arr1 = [1,2];
var arr2 = [3,4];
arr1.push(arr2);
console.log(arr1); // [1,2,[3,4]]	

Obwohl concat Arrays zusammenführen kann, fügt es einem vorhandenen Array keine Elemente hinzu, sondern erstellt und gibt ein neues Array zurück.

var arr1 = [1,2];
var arr2 = [3,4];

var arr3 = arr1.concat(arr2);
konsole.log(arr1); // [1,2]
konsole.log(arr3); // [1,2,3,4]

Was ist, wenn wir Elemente an ein vorhandenes Array anhängen möchten? Zyklus? NEIN! Hier kommt Apply ins Spiel

var arr1 = [1,2];
var arr2 = [3,4];

arr1.push.anwenden(arr1,arr2);
konsole.log(arr1); // [1,2,3,4]

Verwenden von „apply“ mit integrierten Funktionen

/* Finde die größte/kleinste Zahl im Array*/
Var Zahlen = [5, 6, 2, 3, 7];

var max = Math.max(Zahlen)
var min = Math.min(Zahlen)
konsole.log(min,max); // NaN NaN

var max = Math.max.apply(null, Zahlen); 
/* Grundsätzlich gleichwertig mit Math.max(numbers[0], ...) oder Math.max(5, 6, ..) */
var min = Math.min.apply(null, Zahlen);
konsole.log(min,max); // 2 7

binden

Syntax: fn.bind (der Zeiger hiervon im Funktionskörper der fn-Funktion, arg1, arg2, …);

Funktion: Erzeugen Sie eine neue gebundene Funktion, geben Sie deren this-Zeiger an und übergeben Sie Parameter. Sie muss aufgerufen werden, bevor sie ausgeführt wird.

Parameter:

• Der erste Parameter: das Objekt, auf das dieser zeigt
• Die verbleibenden Parameter: Die Werte, die übergeben werden müssen, können mehrere sein, getrennt durch Kommas
  

var obj = {name:'jack'};
Funktion fn(a,b){
	konsole.log(dies,a,b);
}
fn(1,2); // Fenster 1 2
fn.bind(obj,1,2); // Nicht aufgerufen und nicht ausgeführt fn.bind(obj,1,3)() // obj 1 3
var newFn = fn.bind(obj,3,4);
newFn(); // Objekt 1 4
neueFn(5,6); // Objekt 3 4

Zusammenfassen

Dies ist das Ende dieses Artikels über das This-Pointing-Problem in JavaScript-Funktionen. Weitere relevante Inhalte zu JavaScript-Funktionen mit This-Pointing 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!