Das Keyword

Das Schlüsselwort this verweist auf den Wert des Objekts, das an das zum Zeitpunkt ihres Aufrufs verwendet, d. h., ihr Wert variiert je nach zur Information, ob eine Funktion als Methode, als eigenständige Funktion oder als Konstruktor definiert werden.

Wenn eine Funktion aufgerufen wird, erstellt sie eine Instanz des Schlüsselworts this hinter die Szenen als Verweis auf das Objekt, das diese Funktion enthält, Zugriff auf die zugehörigen Properties und Methoden. Die Arbeit mit this ähnelt in gewisser Weise der Arbeit mit einer deklarierten Variablen. mit const. Wie eine Konstante kann this nicht entfernt und ihr Wert nicht neu zugewiesen, aber die Methoden und Eigenschaften des Objekts, die mit dem Schlüsselwort this enthält, können geändert werden.

Globale Bindung

Außerhalb einer Funktion oder des Kontexts eines Objekts bezieht sich this auf den globalThis, die in den meisten Fällen auf das globale Objekt verweist. JavaScript-Umgebungen. Wenn ein Skript in einem Webbrowser ausgeführt wird, Das globale Objekt ist das window-Objekt:

this;
> Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, ...}

In Node.js ist globalThis das global-Objekt:

$ node
Welcome to Node.js v20.10.0.
Type ".help" for more information.
> this
<ref *1> Object [global] {
...
}

Außerhalb des strikten Modus bezieht sich this auch auf das globale Objekt in einem eigenständigen , da das übergeordnete Element Window das Objekt ist, das faktisch „Eigentümer“ ist. für diese Funktionen.

function myFunction() {
    console.log( this );
}
myFunction();
> Window {...}

(function() {
    console.log( this );
}());
> Window {...}

Im strikten Modus hat this den Wert undefined in einem eigenständigen :

(function() {
    "use strict";
    console.log( this );
}());
> undefined

Vor der Einführung des strikten Modus wurde ein null- oder undefined-Wert für this durch einen Verweis auf das globale Objekt ersetzt. Manchmal werden Ihnen globale Bindung als „Standardbindung“ bezeichnet aufgrund dieses alten Verhaltens.

Implizite Bindung

Wenn eine Funktion als Methode eines Objekts aufgerufen wird, ist eine Instanz von this innerhalb Diese Methode verweist auf das Objekt, das die Methode enthält, und gewährt Zugriff auf den Methoden und Eigenschaften:

let myObject = {
    myValue: "This is my string.",
    myMethod() {
            console.log( this.myValue );
    }
};

myObject.myMethod();
> "This is my string."

Es kann so aussehen, als würde der Wert von this davon abhängen, wie eine Funktion und ihre einschließenden Objekte definiert sind. Stattdessen lautet der Kontext für den Wert von this den aktuellen Kontext der Ausführung. In diesem Fall besteht der Ausführungskontext darin, Das Objekt myObject ruft die Methode myMethod auf, daher ist myObject der Wert für this. Im Zusammenhang mit der vorherigen Studie Beispiele, aber für fortgeschrittenere Anwendungsfälle von this ist es ein wesentlicher Unterschied, .

Verwenden Sie this im Allgemeinen auf eine Weise, für die nicht erwartet wird, dass der umgebende Code Struktur zu verstehen. Die Ausnahme von dieser Regel ist ES5 Pfeilfunktionen:

this in Pfeilfunktionen

In Pfeilfunktionen this wird zu einer Bindung in einer lexisch einschließende Umgebung. Das bedeutet, dass this in einer Pfeilfunktion bezieht sich auf den Wert von this in dieser Funktion am engsten einschließenden Kontext:

let myObject = {
    myMethod() { console.log( this ); },
    myArrowFunction: () => console.log( this ),
    myEnclosingMethod: function () {
        this.myArrowFunction = () => { console.log(this) };
    }
};

myObject.myMethod();
> Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() }

myObject.myArrowFunction();
> Window {...}

Im vorherigen Beispiel protokolliert myObject.myMethod() myObject als Objekt die „besitzt“ Methode, aber myObject.myArrowFunction() gibt globalThis zurück (oder undefined), da die Instanz von this in der Pfeilfunktion bezieht sich stattdessen auf den höchsten einschließenden Bereich.

Im folgenden Beispiel erstellt myEnclosingMethod eine Pfeilfunktion für die , in dem das Objekt bei seiner Ausführung enthalten ist. Die Instanz von this innerhalb der bezieht sich nun auf den Wert von this im einschließenden Umgebung, also die Methode, die diese Pfeilfunktion enthält. Da die Der Wert von this in myEnclosingMethod bezieht sich auf myObject, nachdem Sie Pfeilfunktion definieren, verweist this innerhalb der Pfeilfunktion auch auf myObject:

let myObject = {
    myMethod() { console.log( this ); },
    myEnclosingMethod: function () {
        this.myArrowFunction = () => { console.log(this) };
    }
};

myObject.myEnclosingMethod();
myObject.myArrowFunction();
> Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() }

Explizite Bindung

Die implizite Bindung eignet sich für die meisten Anwendungsfälle bei der Arbeit mit this. Sie haben jedoch Manchmal muss der Wert von this für eine bestimmte Ausführung stehen Kontext statt des angenommenen Kontexts. Anschaulich, wenn auch etwas veraltet, Beispiel ist die Arbeit mit this in der Callback-Funktion einer setTimeout. da dieser Callback einen eindeutigen Ausführungskontext hat:

var myObject = {
  myString: "This is my string.",
  myMethod() {
    console.log( this.myString );
  }
};
myObject.myMethod();
> "This is my string."

setTimeout( myObject.myMethod, 100 );
> undefined

Obwohl dieser spezielle Mangel von setTimeout inzwischen behoben wurde, andere Funktionen, ähnliche Probleme Für this wurden bereits Probleme behoben durch Erstellen eines expliziten Verweises auf den Wert von this im Bereich der beabsichtigten Kontext. Es kann gelegentlich vorkommen, dass Instanzen von this zugewiesen werden mit Kennungen wie that, self oder _this in der alten Codebasen. Dies sind gängige Kennzeichnungskonventionen für Variablen, die ein Wert für this übergeben.

Wenn Sie eine Funktion mit den Methoden call(), bind() oder apply() aufrufen, this verweist explizit auf das aufgerufene Objekt:

let myFunction = function() {
    console.log( this.myValue );
}

let myObject = {
   "myValue" : "This is my string."
 };

myFunction.call( myObject );
> "This is my string."

var myObject = {
  myString: "This is my string.",
  myMethod() {
    console.log( this.myString );
  }
};

setTimeout( myObject.myMethod.bind( myObject ), 100 );
> "This is my string."

Die explizite Bindung überschreibt den Wert this, der von der impliziten Bindung bereitgestellt wird.

let myObject = {
    "myValue" : "This string sits alongside myMethod.",
    myMethod() {
        console.log( this.myValue );
    }
};
let myOtherObject = {
    "myValue" : "This is a string in another object entirely.",
};

myObject.myMethod.call( myOtherObject );
> "This is a string in another object entirely."

Wenn eine Funktion so aufgerufen wird, dass der Wert von this auf undefined oder null, dieser Wert wird durch globalThis außerhalb des strikten Modus:

let myFunction = function() {
    console.log( this );
}

myFunction.call( null );
> Window {...}

Wenn eine Funktion so aufgerufen wird, dass this ein Primitiv erhalten würde, wird dieser Wert durch den Wert Wrapper-Objekt des primitiven Werts außerhalb des strikten Modus:

let myFunction = function() {
    console.log( this );
}

let myNumber = 10;

myFunction.call( myNumber );
> Number { 10 }

Im strikten Modus wird ein übergebener this-Wert in keiner Weise zu einem Objekt gezwungen. auch wenn es sich um einen primitiven Wert, einen null- oder einen undefined-Wert handelt:

"use strict";
let myFunction = function() {
    console.log( this );
}

let myNumber = 10;

myFunction.call( myNumber );
> 10

myFunction.call( null );
> null

new Bindung

Wenn eine class als Konstruktor mithilfe der Methode new-Keyword, this bezieht sich auf die neu erstellte Instanz:

class MyClass {
    myString;
    constructor() {
        this.myString = "My string.";
    }
    logThis() {
        console.log( this );
    }
}
const thisClass = new MyClass();

thisClass.logThis();
> Object { myString: "My string." }

Ähnlich verhält sich der Wert von this in einer Konstruktorfunktion, die mithilfe von new aufgerufen wird. verweist auf das zu erstellende Objekt:

function MyFunction() {
  this.myString = "My string.";
  this.logThis = function() {
    console.log( this );
  }
}
const myObject = new MyFunction();

myObject.logThis();
> Object { myString: "My string.", logThis: logThis() }

Event-Handler-Bindung

Im Kontext von Event-Handlern verweist der Wert von this auf das Objekt, das ruft es auf. In der Callback-Funktion eines Event-Handlers bedeutet dies, dass this verweist auf das mit dem Handler verknüpfte Element:

let button = document.querySelector( "button" );

button.addEventListener( "click", function( event ) { console.log( this ); } );

Wenn ein Nutzer mit dem button im vorherigen Snippet interagiert, lautet das Ergebnis: Das Element-Objekt, das die <button> selbst enthält:

> Button {}

Wenn eine Pfeilfunktion als Event-Listener-Callback verwendet wird, ist der Wert von this wird ebenfalls vom nächstgelegenen einschließenden Ausführungskontext bereitgestellt. Ganz oben bedeutet, dass this in einer Event-Handler-Callback-Funktion globalThis (oder undefined im strikten Modus):

let button = document.querySelector( "button" );

button.addEventListener( "click", ( event ) => { console.log( this ); } );
> undefined

Wie bei jedem anderen Objekt gilt auch hier, wenn Sie call(), bind() oder apply() verwenden. Methoden zum Verweisen auf die Callback-Funktion des Event-Listeners this verweist explizit auf das Objekt:

let button = document.querySelector( "button" );
let myObject = {
    "myValue" : true
};
function handleClick() {
    console.log( this );
}

button.addEventListener( "click", handleClick.bind( myObject ) );
> Object { myValue: true }

Wissen testen