Was ist das? Ein Artikel wird Ihnen helfen, dies in Sekundenschnelle zu verstehen

Der Inhalt dieses Artikels handelt davon, was ist das? Dieser Artikel ermöglicht es Ihnen, dies in Sekundenschnelle zu verstehen. Freunde in Not können darauf verweisen. In der täglichen Entwicklung stoßen wir oft auf Fehler, die darauf hinweisen. Ich war lange deprimiert, bevor ich plötzlich aufwachte und daraus lernte, um Umwege bei der zukünftigen Entwicklungsarbeit zu vermeiden.

Hinweis: Dieser Artikel gilt nur für die Browserumgebung.

1: Globale Ausführung

console.log（this）；
// Window

Es ist ersichtlich, dass dies im globalen Bereich auf das aktuelle globale Objektfenster verweist.

2: Ausführung in Funktion

1. Im nicht-strikten Modus

function func （） {
console.log（this）；
}
func（）；
// Window

2. Im strikten Modus

"use strict";
function func （） {
console.log（this）；
}
func（）；
// undefined

Drei: Methodenaufruf als Objekt

Wenn eine Funktion als Methode eines Objekts aufgerufen wird, zeigt dies auf das aktuelle Objekt obj:

var obj = {
name: 'kk',
func: function （） {
console.log（this.name）；
}
}
obj.func（）；
// kk

Wenn die Methode des Objekt wird einer Variablen zugewiesen, wenn diese Methode aufgerufen wird, zeigt dies auf Fenster:

var obj = {
name: 'kk',
func: function （） {
console.log（this）；
}
}
var test = obj.func;
test（）；
// Window

Viertens: Verwenden Sie

als Konstruktor in JS, um a zu implementieren In der Klasse müssen wir einige Konstruktoren definieren und beim Aufruf eines Konstruktors das Schlüsselwort new hinzufügen:

function Person （name） {
this.name = name;
console.log（this）；
}
var p1 = new Person（'kk'）；
// Person

Zu diesem Zeitpunkt zeigt dies auf das Objekt, das beim Aufruf des Konstruktors instanziiert wird.

Natürlich ist der Konstruktor tatsächlich eine Funktion. Wenn der Konstruktor als gewöhnliche Funktion aufgerufen wird, zeigt dies auf Window:

function Person （name） {
this.name = name;
console.log（this）；
}
var p2 = Person（'MM'）；
// Window

Fünf: Verwenden Sie in einem Timer

setInterval（function （） {
console.log（this）；
}, 2000）
// Window
setTimeout（function （） {
console.log（this）；
}, 0）
// Window

Wenn es keinen speziellen Zeiger gibt (Informationen zu Zeigeränderungen finden Sie unten: So ändern Sie den Zeiger dafür), sind die Zeiger davon in den Rückruffunktionen von setInterval und setTimeout alle Window. Dies liegt daran, dass die JS-Timer-Methode unter „Fenster“ definiert ist.

Sechs: Pfeilfunktion

Wird in der globalen Umgebung aufgerufen:

var func = （） => {
console.log（this）；
}
func（）；
// Window

Wird als Funktion des Objekts aufgerufen:

var obj = {
name: 'hh',
func: function （） {
setTimeout（function （） {
console.log（this）；
}, 0）
}
}
obj.func（）；
// Window
var obj = {
name: 'hh',
func: function （） {
setTimeout（（） => {
console.log（this）；
}, 0）
}
}
obj.func（）；
// obj

Nein. Es ist schwer zu finden, dass gewöhnliche Funktionen als Funktion des Objekts aufgerufen werden, dies zeigt auf Window, Pfeilfunktionen werden als Funktion des Objekts aufgerufen und dies zeigt auf das Objekt, in dem es definiert ist, nämlich this in func , also obj.

Der Wert von this in einer Pfeilfunktion hängt vom Wert von this von Nicht-Pfeilfunktionen außerhalb der Funktion ab und der Wert von this kann nicht durch call(), apply() und bind() geändert werden. Methoden.

Sieben: anrufen, anwenden, binden

Aufruf:

fun.call(thisArg[, arg1[, arg2[, …]]] )

Die Funktion wird sofort ausgeführt. Der erste Parameter gibt den Kontext dieser Funktion an, und die folgenden Parameter sind die Parameter, die zum Ausführen der Funktion übergeben werden müssen >apply:

fun.apply(thisArg, [argsArray])

Die Funktion wird auch sofort ausgeführt. Der erste Parameter gibt den Kontext dafür in der Ausführungsfunktion an und der zweite Parameter ist ein Array, das an die Ausführungsparameter der Funktion übergeben wird (Unterschied zum Aufruf);

bind:

var foo = fun.bind (thisArg[, arg1[, arg2[, … ]]]);

Die Funktion wird nicht ausgeführt, sondern eine neue Funktion wird mit dem Kontext angegeben, und die folgenden Parameter sind die Parameter, die zur Ausführung übergeben werden müssen die Funktion;

Sehen wir uns ein Beispiel an:

function Person（name, age） {
this.name = name;
this.age = age;
console.log（this）；
}
var obj = {
name: 'kk',
age: 6
};
Person.call（obj, 'mm', 10）；
// obj，{name: "mm", age: 10}
Person.apply（obj, ['mm', 10]）；
// obj，{name: "mm", age: 10}
var p1 = Person.bind（obj, 'mm', 10）
var p2 = new p1（）；
// Person {name: "mm", age: 10}

In diesem Beispiel verweisen die Funktionen „this“ von „call“, „apply“ und „bind all“ auf obj, und sie können alle normal ausgeführt werden Der Unterschied zwischen call und apply liegt in den übergebenen Parametern. call empfängt mehrere Parameterlisten, apply führt die Funktion nicht sofort aus, sondern gibt eine Funktion zurück ausgeführt werden, um das Ergebnis zurückzugeben, bind empfängt mehrere Parameterlisten.

Anwendung: So ändern Sie die Ausrichtung dieses Moduls

Warum sprechen wir über dieses Modul, um allen ein tieferes Verständnis des oben beschriebenen Ausrichtungsproblems zu ermöglichen? Wir haben ein gründlicheres Verständnis der wichtigen JS-Funktionen: die Verwendung von Call, Apply und Bind. In der tatsächlichen Projektentwicklung stoßen wir häufig auf Situationen, in denen wir den Zeiger ändern müssen.

Werfen wir einen Blick auf die Methoden:

1. Verwenden Sie die Pfeilfunktion von es6

var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
setTimeout（function （） {
this.func1（）
}, 1000）；
}
};
obj.func2（）；
// Uncaught TypeError: this.func1 is not a function

Zu diesem Zeitpunkt wird ein Fehler gemeldet, da dies in der setTimeout-Funktion erfolgt zeigt auf Window und es gibt keine func1-Funktion für das Window-Objekt. Ändern wir es in eine Pfeilfunktion:

var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
setTimeout（（） => {
this.func1（）
}, 1000）；
}
};
obj.func2（）；
// kk

Zu diesem Zeitpunkt wird kein Fehler gemeldet, da der Wert dieser Pfeilfunktion vom Wert dieser Nicht-Pfeilfunktion außerhalb der Funktion abhängt ist der Wert von func2, also obj.

2. Verwenden Sie _this = this innerhalb der Funktion

var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
let _this = this;
setTimeout（function （） {
_this.func1（）
}, 1000）；
}
};
obj.func2（）；
// kk

Zu diesem Zeitpunkt kann func2 auch normal ausgeführt werden. Setzen Sie in func2 zunächst var _this = this, wobei dies das Objekt obj ist, das auf func2 zeigt. Um zu verhindern, dass setTimeout in func2 von window aufgerufen wird, ist dies in setTimeout window. Wir weisen this (zeigt auf die Variable obj) einer Variablen _this zu, sodass es, wenn wir _this in func2 verwenden, auf das Objekt obj zeigt.

3. Mit call, apply, bind

call:

var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
setTimeout（function （） {
this.func1（）
}.call（obj）， 1000）；
}
};
obj.func2（）；
// kk

apply:

var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
setTimeout（function （） {
this.func1（）
}.apply（obj）， 1000）；
}
};
obj.func2（）；
// kk
bind:
var name = "hh";
var obj = {
name : "kk",
func1: function （） {
console.log（this.name）
},
func2: function （） {
setTimeout（function （） {
this.func1（）
}.bind（obj）（）， 1000）；
}
};
obj.func2（）；
// kk

call, apply und bind können alle das Kontextobjekt ändern Daher wird kein Fehler gemeldet und es kann normal ausgeführt werden.

Der konkrete Grund ist im siebten Punkt oben ersichtlich: Aufrufen, Bewerben und Binden.

4. new instanziiert ein Objekt

Wie oben: Der vierte Punkt wird als Konstruktor verwendet.

Das Obige ist die Erklärung, was das ist? In einem Artikel können Sie die gesamte Einführung in Sekundenschnelle verstehen. Wenn Sie mehr über das JavaScript-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonWas ist das? Ein Artikel wird Ihnen helfen, dies in Sekundenschnelle zu verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!