Die Autorin des Materials, dessen Übersetzung wir heute veröffentlichen, sagt, dass bei ihrer Arbeit in der Buchhaltung dort klare Begriffe verwendet wurden, deren Bedeutung im Wörterbuch leicht zu finden ist. Nachdem sie mit der Programmierung und insbesondere mit JavaScript begonnen hatte, stieß sie auf solche Konzepte, deren Definitionen nicht mehr in Wörterbüchern zu finden sind. Dies betrifft beispielsweise das Schlüsselwort
this . Sie erinnert sich an die Zeit, als sie auf JS-Objekte und Konstruktorfunktionen traf, die dieses Schlüsselwort verwendeten, aber es war nicht so einfach, die genaue Bedeutung zu ermitteln. Sie glaubt, dass andere Anfänger mit ähnlichen Problemen konfrontiert sind, insbesondere diejenigen, die zuvor noch nicht in der Programmierung gearbeitet haben. Wer JavaScript lernen will, muss sich sowieso damit auseinandersetzen. Dieses Material soll allen helfen, dabei zu helfen.
Was ist das
Ich mache Sie auf meine eigene Definition
this .
This ist ein in JavaScript verwendetes Schlüsselwort, das je nach Kontext eine besondere Bedeutung hat.
Der Grund, warum
this für Neulinge so viel Verwirrung stiftet, ist, dass sich der Kontext je nach Verwendung ändert.
This kann als dynamisches Schlüsselwort betrachtet werden. Mir gefällt, wie das Konzept des „Kontexts“ in
diesem Artikel von Ryan Morr offenbart wird. Ihm zufolge ist Kontext immer der Wert
this , das sich auf ein Objekt bezieht, das den Code "besitzt", der gerade ausgeführt wird. Der
this Kontext ist jedoch nicht derselbe wie der Ausführungskontext.
Wenn wir also das Schlüsselwort
this , verweisen wir mit seiner Hilfe tatsächlich auf ein Objekt. Lassen Sie uns über einige dieser Beispiele sprechen, nachdem wir einige Beispiele untersucht haben.
Situationen, in denen dies auf ein Fensterobjekt zeigt
Wenn Sie versuchen, auf
this im globalen Bereich zuzugreifen, wird es an den globalen Kontext gebunden, dh an das
window im Browser.
Wenn Sie Funktionen verwenden, die im globalen Kontext verfügbar sind (dies unterscheidet sie von Objektmethoden),
this das
this auf das
window .
Versuchen Sie, diesen Code beispielsweise in der Browserkonsole auszuführen:
console.log(this); // Window // Window { postMessage: ƒ, // blur: ƒ, // focus: ƒ, // close: ƒ, // frames: Window, …} function myFunction() { console.log(this); } // myFunction(); // Window! // Window { postMessage: ƒ, // blur: ƒ, // focus: ƒ, // close: ƒ, // frames: Window, …}
Verwenden Sie dies in einem Objekt
Wenn
this in einem Objekt verwendet wird, bezieht sich dieses Schlüsselwort auf das Objekt selbst. Betrachten Sie ein Beispiel. Angenommen, Sie haben ein
dog mit Methoden erstellt und dieses in einer seiner Methoden aufgerufen. Wenn
this innerhalb dieser Methode verwendet wird, repräsentiert dieses Schlüsselwort das
dog .
var dog = { name: 'Chester', breed: 'beagle', intro: function(){ console.log(this); } }; dog.intro(); // dog // {name: "Chester", breed: "beagle", intro: ƒ} // breed:"beagle" // intro:ƒ () // name:"Chester" // __proto__:Object
Dies und verschachtelte Objekte
Das Anwenden auf verschachtelte Objekte kann zu Verwirrung führen. In solchen Situationen ist zu beachten, dass sich das Schlüsselwort this auf das Objekt bezieht, in dessen Methode es verwendet wird. Betrachten Sie ein Beispiel.
var obj1 = { hello: function() { console.log('Hello world'); return this; }, obj2: { breed: 'dog', speak: function(){ console.log('woof!'); return this; } } }; console.log(obj1); console.log(obj1.hello()); // 'Hello world' obj1 console.log(obj1.obj2); console.log(obj1.obj2.speak()); // 'woof!' obj2
Mit Pfeilfunktionen
Pfeilfunktionen verhalten sich anders als reguläre Funktionen. Denken Sie daran: Wenn Sie in der Methode eines Objekts darauf zugreifen, entspricht dieses Schlüsselwort dem Objekt, zu dem die Methode gehört. Dies gilt jedoch nicht für Pfeilfunktionen. Stattdessen bezieht sich
this in solchen Funktionen auf den globalen Kontext (das
window ). Betrachten Sie den folgenden Code, der in der Browserkonsole ausgeführt werden kann.
var objReg = { hello: function() { return this; } }; var objArrow = { hello: () => this }; objReg.hello();
Wenn Sie sich
new.target MDN ansehen, finden Sie Informationen darüber, dass Pfeilfunktionen eine kürzere Schreibform haben als funktionale Ausdrücke und nicht an ihre eigenen Entitäten
this ,
arguments ,
super oder
new.target . Pfeilfunktionen eignen sich am besten für die Verwendung als normale Funktionen und nicht als Objektmethoden. Sie können nicht als Konstruktoren verwendet werden.
Wir hören MDN und verwenden keine Pfeilfunktionen als Objektmethoden.
Verwenden Sie dies in regulären Funktionen
Wenn sich eine reguläre Funktion im globalen Bereich befindet, wird das darin verwendete Schlüsselwort this an das
window gebunden. Das folgende Beispiel zeigt die
test als Methode des
window .
function test() { console.log('hello world'); console.log(this); } test();
Wenn die Funktion jedoch im strengen Modus ausgeführt wird, wird in diesem Modus
undefined geschrieben, da in diesem Modus die Standardbindungen deaktiviert sind. Führen Sie das folgende Beispiel in der Browserkonsole aus.
function test() { 'use strict'; return this; } console.log( test() );
Aufruf von einer Funktion, die außerhalb des Objekts deklariert und dann als Methode zugewiesen wurde
Betrachten Sie das Beispiel des
dog , das wir bereits kennen. Als Methode für dieses Objekt können Sie die außerhalb deklarierte
chase Funktion zuweisen. Es gab keine Methoden im
dog , bis wir die
foo Methode erstellt haben, der die
chase zugewiesen wurde. Wenn Sie jetzt die
dog.foo Methode
dog.foo , wird die
chase Funktion aufgerufen. Das Schlüsselwort
this , auf das in dieser Funktion zugegriffen wird, zeigt auf das
dog . Und die
chase Funktion verhält sich falsch, wenn Sie versuchen, sie als unabhängige Funktion aufzurufen, da sie bei diesem Ansatz auf ein globales Objekt verweist, das nicht über die Eigenschaften verfügt, auf die wir in dieser Funktion über
this Funktion zugreifen.
var dog = { breed: 'Beagles', lovesToChase: 'rabbits' }; function chase() { console.log(this.breed + ' loves chasing ' + this.lovesToChase + '.'); } dog.foo = chase; dog.foo();
Schlüsselwort neu und das
Das Schlüsselwort
this wird in Konstruktorfunktionen verwendet, die zum Erstellen von Objekten verwendet werden, da es auf universelle Weise ermöglicht, mit vielen Objekten zu arbeiten, die mit einer solchen Funktion erstellt wurden. JavaScript verfügt auch über Standardkonstruktorfunktionen, mit denen Sie beispielsweise Objekte vom Typ
Number oder
String erstellen können. Ähnliche Funktionen, die vom Programmierer selbst festgelegt werden, ermöglichen es ihm, Objekte zu erstellen, deren Zusammensetzung von Eigenschaften und Methoden selbst festgelegt wird.
Wie Sie bereits verstanden haben, mag ich Hunde, daher werden wir eine Konstruktorfunktion zum Erstellen von Objekten wie
Dog , die einige Eigenschaften und Methoden enthalten.
function Dog(breed, name, friends){ this.breed = breed; this.name = name; this.friends = friends; this.intro = function() { console.log(`Hi, my name is ${this.name} and I'm a ${this.breed}`); return this; }; }
Wenn eine Konstruktorfunktion mit dem Schlüsselwort
new aufgerufen wird, verweist dies auf ein neues Objekt, das mithilfe des Konstruktors mit Eigenschaften und Methoden ausgestattet ist.
Hier erfahren Sie, wie Sie mit Standard-JavaScript-Konstruktoren arbeiten.
var str = new String('Hello world'); var str2 = 'Hello world';
Lassen Sie uns nun mit der neu erstellten
Dog Konstruktorfunktion arbeiten.
// Dog var chester = new Dog('beagle', 'Chester', ['Gracie', 'Josey', 'Barkley']); chester.intro(); // Hi, my name is Chester and I'm a beagle console.log(chester); // Dog {breed: "beagle", name: "Chester", friends: Array(3), intro: ƒ}
Hier ist ein weiteres Beispiel für die Verwendung von Konstruktorfunktionen.
var City = function(city, state) { this.city = city || "Phoenix"; this.state = state || "AZ"; this.sentence = function() { console.log(`I live in ${this.city}, ${this.state}.`); }; }; var phoenix = new City();
Über die Bedeutung des neuen Schlüsselworts
Wenn Sie die Konstruktorfunktion mit dem
new Schlüsselwort aufrufen, zeigt das Schlüsselwort
this auf ein neues Objekt, das nach einigen Arbeiten von dieser Funktion zurückgegeben wird. Das Schlüsselwort
this in dieser Situation ist sehr wichtig. Warum? Die Sache ist, dass es mit seiner Hilfe möglich ist, mit einer einzigen Konstruktorfunktion viele Objekte des gleichen Typs zu erstellen.
Auf diese Weise können wir die Anwendung skalieren und die Codeduplizierung reduzieren. Überlegen Sie sich, wie Social-Media-Konten organisiert sind, um die Bedeutung dieses Mechanismus zu verstehen. Jedes Konto kann eine Instanz eines Objekts sein, das mit der Konstruktorfunktion
Friend . Jedes dieser Objekte kann mit eindeutigen Benutzerinformationen gefüllt werden. Betrachten Sie den folgenden Code.
// - var Friend = function(name, password, interests, job){ this.fullName = name; this.password = password; this.interests = interests; this.job = job; }; function sayHello(){ // , , this // console.log(this); return `Hi, my name is ${this.fullName} and I'm a ${this.job}. Let's be friends!`; } // Friend, new var john = new Friend('John Smith', 'badpassword', ['hiking', 'biking', 'skiing'], 'teacher'); console.log(john); // greeting john john.greeting = sayHello; // console.log( john.greeting() ); // , sayHello() console.log( sayHello() ) ;
Zusammenfassung
Tatsächlich ist die Verwendung
this in JavaScript nicht auf die oben beschriebenen Beispiele beschränkt. Eine Reihe dieser Beispiele könnte daher die Verwendung der Funktionen
call ,
apply und
bind . Da dieses Material für Anfänger gedacht ist und die Grundlagen erklären soll, werden sie hier nicht angesprochen. Wenn Sie sich jetzt ein erstes Verständnis davon
this , können Sie diese Methoden leicht herausfinden. Die Hauptsache ist, sich daran zu erinnern, dass Sie, wenn Sie beim ersten Mal etwas nicht verstehen können, nicht aufhören zu lernen, zu üben und Materialien zu dem Thema zu lesen, an dem Sie interessiert sind. In einem von ihnen werden Sie sicherlich auf etwas stoßen (zum Beispiel auf eine erfolgreiche Phrase), das Ihnen hilft, zu verstehen, was Sie vorher nicht verstehen konnten.
Liebe Leser! Haben Sie Schwierigkeiten gehabt, dieses Schlüsselwort in JavaScript zu verstehen?