In diesem Tutorial lernen Sie anhand von Beispielen dieses Schlüsselwort von JavaScript kennen.
In JavaScript thisbezieht sich das Schlüsselwort auf das Objekt, in dem es aufgerufen wird.
1. dieses Inside Global Scope
Wenn thises alleine verwendet wird, thisbezieht es sich auf das globale Objekt ( windowObjekt in Browsern). Beispielsweise,
let a = this; console.log(a); // Window () this.name = 'Sarah'; console.log(window.name); // Sarah
Hier this.nameist das gleiche wie window.name.
2. diese Inside-Funktion
Wenn thisin einer Funktion verwendet wird, thisbezieht sich auf das globale Objekt ( windowObjekt in Browsern). Beispielsweise,
function greet() ( // this inside function // this refers to the global object console.log(this); ) greet(); // Window ()
3. diese Inside Constructor-Funktion
In JavaScript werden Konstruktorfunktionen zum Erstellen von Objekten verwendet. Wenn eine Funktion als Konstruktorfunktion verwendet wird, thisbezieht sie sich auf das Objekt, in dem sie verwendet wird. Beispielsweise,
function Person() ( this.name = 'Jack'; console.log(this); ) let person1 = new Person(); console.log(person1.name);
Ausgabe
Person (Name: "Jack") Jack
Hier thisbezieht sich auf das Objekt person1. Deshalb person1.namegibt uns Jack.
Hinweis : Wenn thises mit ES6-Klassen verwendet wird, bezieht es sich auf das Objekt, in dem es verwendet wird (ähnlich wie Konstruktorfunktionen).
4. diese Inside Object-Methode
Wenn thises in der Methode eines Objekts verwendet wird, thisbezieht es sich auf das Objekt , in dem es liegt. Beispielsweise,
const person = ( name : 'Jack', age: 25, // this inside method // this refers to the object itself greet() ( console.log(this); console.log(this.name); ) ) person.greet();
Ausgabe
(Name: "Jack", Alter: 25, Begrüßung: ƒ) Jack
Im obigen Beispiel thisbezieht sich auf das personObjekt.
5. diese innere innere Funktion
Wenn Sie thisinnerhalb einer inneren Funktion (innerhalb einer Methode) zugreifen , thisbezieht sich dies auf das globale Objekt. Beispielsweise,
const person = ( name : 'Jack', age: 25, // this inside method // this refers to the object itself greet() ( console.log(this); // (name: "Jack", age… ) console.log(this.age); // 25 // inner function function innerFunc() ( // this refers to the global object console.log(this); // Window (… ) console.log(this.age); // undefined ) innerFunc(); ) ) person.greet();
Ausgabe
(Name: "Jack", Alter: 25, Begrüßung: ƒ) 25 Fenster (…) undefiniert
Hier bezieht sich thisinside innerFunc()auf das globale Objekt, da innerFunc()es sich innerhalb einer Methode befindet.
Jedoch this.ageaußerhalb innerFunc()bezieht sich auf das personObjekt.
6. diese Innenpfeilfunktion
thisBezieht sich innerhalb der Pfeilfunktion auf den übergeordneten Bereich. Beispielsweise,
const greet = () => ( console.log(this); ) greet(); // Window (… )
Pfeilfunktionen haben keine eigenen this. Wenn Sie thisinnerhalb einer Pfeilfunktion verwenden, wird thisauf das übergeordnete Bereichsobjekt verwiesen. Beispielsweise,
const greet = ( name: 'Jack', // method sayHi () ( let hi = () => console.log(this.name); hi(); ) ) greet.sayHi(); // Jack
Hier bezieht sich this.namedie hi()Funktion auf das greetObjekt.
Sie können auch die Pfeilfunktion verwenden, um das Problem zu lösen, undefinedwenn eine Funktion in einer Methode verwendet wird (siehe Beispiel 5). Beispielsweise,
const person = ( name : 'Jack', age: 25, // this inside method // this refers to the object itself greet() ( console.log(this); console.log(this.age); // inner function let innerFunc = () => ( // this refers to the global object console.log(this); console.log(this.age); ) innerFunc(); ) ) person.greet();
Ausgabe
(Name: "Jack", Alter: 25, Begrüßung: ƒ) 25 (Name: "Jack", Alter: 25, Begrüßung: ƒ) 25
Hier innerFunc()wird mit der Pfeilfunktion definiert. Es nimmt thisvon seinem übergeordneten Bereich. Daher this.agegibt 25 .
Wenn die Pfeilfunktion mit verwendet wird this, bezieht sie sich auf den äußeren Bereich.
7. diese Inside-Funktion mit Strict Mode
Wann thiswird in einer Funktion mit striktem Modus verwendet, thisist undefined. Beispielsweise,
'use strict'; this.name = 'Jack'; function greet() ( // this refers to undefined console.log(this); ) greet(); // undefined
Hinweis : Wenn Sie thiseine Funktion mit striktem Modus verwenden, können Sie den JavaScript-Funktionsaufruf () verwenden.
Beispielsweise,
'use strict'; this.name = 'Jack'; function greet() ( console.log(this.name); ) greet.call(this); // Jack
Wenn Sie thismit der call()Funktion übergeben, greet()wird dies als Methode des thisObjekts (in diesem Fall globales Objekt) behandelt.
