Schlüsselwort this in JavaScript

Im Vergleich zu anderen Sprachen verhält sich das Schlüsselwort this in JavaScript etwas anders.

In JavaScript bezieht sich der Schlüsselwort this auf das Objekt, dem es gehört.

Je nach Position der Verwendung hat es verschiedene Werte:

• Im Methodenkontext bezieht sich this aufObjekt des Eigentümers

• Einzeln bezieht sich dies aufGlobales Objekt

• In einer Funktion, bezieht sich "this" aufGlobales Objekt

• In einer Funktion, im strengen Modus, ist "this"Nicht definiertder

• Im Ereignis, bezieht sich "this" auf dasElement

• Methoden wie call() und apply(), können sie darauf referenzierenjegliches Objekt

Methodenkontext

In Objektmethoden bezieht sich "this" auf dieuser.

Im folgenden Beispiel, wenn aufgerufenuser.getName()Wenn, dann wird im Funktionskontext "this" aufuserObjekt:

var user = {
firstName: "Vishal",
lastName : "Choudhary",
age :　22,
getName : function() {
　return this.firstName　+　" "　+　this.lastName;
};
});
document.write(user.getName());　　　//　"Vishal Choudhary"

hieruserObjektbesitzergetNameMethoden.

Globaler Kontext

Im globalen Ausführungs kontext (außerhalb jeder Funktion), bezieht sich "this" immer auf das globale Objekt, egal ob im strengen Modus oder nicht.

//　Im Webbrowser ist auch das Fensterobjekt ein globales Objekt:
console.log(this === window);　　//　true
a =　50;
console.log(window.a);　//　50
this.b = "w3codebox";
console.log(window.b)　　//　"w3codebox"
console.log(b)　//　"w3codebox"

Im Browserfenster ist der globale Objekt[object Window].

Funktionsumgebung

Innerhalb einer Funktion hängt der Wert von "this" von der Art der Funktion ab, die aufgerufen wird.

Da der folgende Code nicht im strengen Modus ist, ist "this" daher standardmäßig der globale Objekt, d.h. der im Browser[object Window]:

function myFunc() {
return this;
};

Im strengen Modus ist jedoch der Wert von "this"undefined:

function myFunc() {
"use strict";
return this;
};

Daher, im strengen Modus, wenn der AusführungskontextNicht definiertEs, dann bleibt esNicht definiert.

thisIn DOM-Ereignisbehandlern

Wenn eine Funktion als Ereignisbehandler verwendet wird, wird "this" auf das Element gesetzt, das das Ereignis ausgelöst hat:

let btn = document.querySelector("button");
btn.onclick = function() {
this.style.display = "none";
});

Wenn Code von Inline-Event-Handlern aufgerufen wird, wird this auf das Element gesetzt, auf dem der Listener platziert wurde:}}

<button onclick="this.style.display='none'">Klicken, mich löschen</button>

Dies ist ein weiteres Beispiel:

<button onclick="alert(this)">Klicken</button>

Explizite Funktionsbinding

Die Methoden call() und apply() sind vorgegebene JavaScript-Methode.

Sie können beide zur Aufrufung von Objektmethoden mit einem anderen Objekt als Parameter verwenden.

function add(c, d) {
return this.a　+　this.b　+　c　+　d;
};
var obj = {a:5, b:10});
add.call(obj,　5,　7);　　//　27
add.apply(obj, [10,　20]);　//　45

Pfeilfunktionen (=>)

In Pfeilfunktionen (=>) weist this immer auf den Lexikalscope hin, in dem sie erstellt wurde.

In globaler Code wird es auf den globalen Objekt gesetzt:

var globalObj = this;
var myFunc = (() => this);
document.write(myFunc() === globalObj);　　　//　true