Ausführliche Antwort darauf in JavaScript (grafisches Tutorial)

Das This-Objekt einer Funktion in JavaScript ist der Bereich, in dem die Funktion ausgeführt wird (Beispiel: Wenn eine Funktion im globalen Bereich einer Webseite aufgerufen wird, bezieht sich dieses Objekt auf das Fenster).

Dies unterscheidet sich in JavaScript stark von objektorientierten Sprachen wie Java. Die Funktionen bind(), call() und apply() erweitern die Flexibilität noch weiter.

Um die Lesbarkeit zu gewährleisten, verwendet dieser Artikel eine freie Übersetzung anstelle einer wörtlichen Übersetzung. Darüber hinaus liegt das Urheberrecht dieses Artikels beim ursprünglichen Autor und die Übersetzung dient nur zum Lernen.

Wenn Sie das JavaScript-Schlüsselwort nicht so tiefgreifend verstehen, kann es sein, dass Sie manchmal in unerwartete Schwierigkeiten geraten. Hier haben wir 5 allgemeine Regeln zusammengefasst, die Ihnen helfen sollen, herauszufinden, worauf das eigentlich hinweist. Obwohl nicht alle Situationen abgedeckt sind, können anhand dieser Regeln die meisten Alltagssituationen korrekt abgeleitet werden.

Der Wert davon wird normalerweise durch die Ausführungsumgebung der Funktion bestimmt, was bedeutet, dass er davon abhängt, wie die Funktion aufgerufen wird.
Jedes Mal, wenn dieselbe Funktion aufgerufen wird, kann dies auf ein anderes Objekt verweisen ;

Globales Objekt

Öffnen Sie das Chrome-Entwicklerfenster (Windows: Strg + Umschalt + J) (Mac: Befehlstaste + Wahltaste + J) und geben Sie Folgendes ein:

console.log(this);

und sehen, was ausgegeben wird?

// Window {}

Fensterobjekt! Denn im globalen Bereich zeigt dies auf das globale Objekt. Das globale Objekt im Browser ist das Fensterobjekt.
Um Ihnen ein klareres Verständnis dafür zu geben, warum dies auf das Fensterobjekt verweist, schauen wir uns ein weiteres Beispiel an:

var myName = 'Brandon';
Wir können auf seinen Wert zugreifen, indem wir myName in die Konsole eingeben:

myName
// 输出 'Brandon'

Tatsächlich sind alle global definierten Variablen an das Fensterobjekt gebunden. Lassen Sie uns den folgenden Test durchführen:

window.myName
// 输出 'Brandon'
window.myName === myName
// 输出 true

Jetzt fügen wir dies in die Funktion ein und sehen, welchen Effekt es hat.

function test(){
 return this;
}
test();

Sie werden feststellen, dass dies immer noch auf das globale Fensterobjekt verweist. Da sich das Schlüsselwort this nicht in einem deklarierten Objekt befindet, wird standardmäßig das globale Fensterobjekt verwendet. Dies kann für die meisten Anfänger etwas schwierig zu verstehen sein. Nachdem Sie diesen Artikel gelesen haben, werden Sie es plötzlich verstehen.
Hinweis: Im Strcit-Modus ist dies im obigen Beispiel undefiniert.

Deklariertes Objekt

Wenn das Schlüsselwort this in einem deklarierten Objekt verwendet wird, wird sein Wert an die nächstgelegene Funktion gebunden, die dieses übergeordnete Objekt aufruft. Lassen Sie uns ein Beispiel verwenden, um dieses Problem zu veranschaulichen:

var person = {
 first: 'John',
 last: 'Smith', 
 full: function() {
  console.log(this.first + ' ' + this.last);
 }
};
person.full();
// 输出 'John Smith'

verwendet dies in der vollständigen Funktion des deklarierten Objekts Person, dann ist das nächste übergeordnete Objekt der vollständigen Funktion, die dies aufruft, Person, also zeigt dies auf Person.

Um besser zu beschreiben, dass dies tatsächlich auf das Personenobjekt verweist, können Sie den folgenden Code in die Browserkonsole kopieren und ausdrucken.

var person = {
 first: 'John',
 last: 'Smith', 
 full: function() {
  console.log(this);
 }
};
person.full();
// 输出 Object {first: "John", last: "Smith", full: function}

Sehen wir uns als Nächstes ein komplexeres Beispiel an:

var person = {
 first: 'John',
 last: 'Smith',
 full: function() {
  console.log(this.first + ' ' + this.last);
 },
 personTwo: {
  first: 'Allison',
  last: 'Jones',
  full: function() {
   console.log(this.first + ' ' + this.last);
  }
 }
};

Hier haben wir verschachtelte Objekte. Auf wen weist das derzeit hin? Drucken wir es aus und werfen wir einen Blick darauf:

person.full();
// 输出 'John Smith'
person.personTwo.full();
// 输出 'Allison Jones'

Sie werden feststellen, dass die zuvor beschriebenen Regeln erfüllt sind: Sein Wert wird an das nächstgelegene übergeordnete Objekt der Funktion gebunden, die dies aufgerufen hat.

neues Schlüsselwort

Wenn Sie das neue Schlüsselwort zum Erstellen eines neuen Objekts verwenden, wird dieses an das neue Objekt gebunden. Schauen wir uns ein Beispiel an:

function Car(make, model) {
 this.make = make;
 this.model = model;
};

Basierend auf der ersten Regel können Sie daraus schließen, dass dies auf das globale Objekt verweist. Wenn wir jedoch das Schlüsselwort new verwenden, um eine neue Variable zu deklarieren, wird diese in der Car-Funktion an ein neues leeres Objekt gebunden und dann werden die Werte von this.make und this.model initialisiert.

var myCar = new Car('Ford', 'Escape');
console.log(myCar);
// 输出 Car {make: "Ford", model: "Escape"}

Aufrufen, binden und anwenden

Wir können das Bindungsobjekt davon explizit in call(), bind() und apply() festlegen. Diese drei Funktionen sind sehr ähnlich, wir müssen jedoch auf ihre subtilen Unterschiede achten.

cba7bc3e0f49b88d0f12843f17825db4

Sehen wir uns ein Beispiel an:

function add(c, d) {
 console.log(this.a + this.b + c + d);
}
add(3,4);
// 输出 NaN

Die Add-Funktion gibt NaN aus, da this.a und this.b undefiniert sind.

Jetzt stellen wir das Objekt vor und verwenden call() und apply(), um Folgendes aufzurufen:

function add(c, d) {
 console.log(this.a + this.b + c + d);
}
var ten = {a: 1, b: 2};
add.call(ten, 3, 4);
// 输出 10
add.apply(ten, [3,4]);
// 输出 10

Wenn wir add.call() verwenden, ist der erste Parameter das Objekt, das dies sein muss gebunden an , der Rest sind die ursprünglichen Parameter der Add-Funktion.
Daher zeigt this.a auf ten.a und this.b auf ten.b. add.apply() ist ähnlich, außer dass der zweite Parameter ein Array zum Speichern der Parameter der Add-Funktion ist.

Die Funktion bind() ähnelt call(), die Funktion bind() wird jedoch nicht sofort aufgerufen. Die Funktion bind() gibt eine Funktion zurück und bindet diese. Als nächstes verwenden wir ein Beispiel, um das Anwendungsszenario der Funktion bind() zu verstehen:

var small = {
 a: 1,
 go: function(b,c,d){
  console.log(this.a+b+c+d);
 }
}
var large = {
 a: 100
}

Ausführung:

small.go(2, 3, 4);
// 输出 10

Was wäre, wenn wir den Wert von large.a anstelle von small verwenden möchten? .A? Wir können call/apply:

small.go.call(large, 2, 3, 4);
// 输出 109

verwenden. Was sollen wir jedoch tun, wenn wir noch nicht wissen, welche Werte für diese drei Parameter übergeben werden sollen? Wir können bind:

var bindTest = small.go.bind(large, 2);

Wenn wir bindTest auf der Konsole drucken, sehen wir:

console.log(bindTest);
// 输出 function (b,c,d){console.log(this.a+b+c+d);}

Hinweis: Diese Funktion hat diese Bindung bereits in geändert großes Objekt, und der erste Parameter b wird übergeben. Daher müssen wir als nächstes die restlichen Parameter übergeben:

bindTest(3, 4);
// 输出 109

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Das Zeigen von dies in JS und die Funktionen von Aufrufen und Anwenden (Bild- und Text-Tutorial)

dies und die Rolle von Call und Apply_Grundkenntnisse

Der Unterschied zwischen self, static, $this in PHP und ausführliche Erklärung der neuesten statischen Bindung

Das obige ist der detaillierte Inhalt vonAusführliche Antwort darauf in JavaScript (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!