JavaScript dies

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.

Interessante Beiträge...