Das Schlüsselwort "this" in JavaScript verstehen

dieses in JavaScript

Unter JavaScript es ist komplizierter, denn wo diese hängt nicht nur davon ab, wie die Funktion definiert ist, sondern auch von der Form des Aufrufs.

Schauen Sie sich an, wie diese funktioniert je nach Ort und Form der Anrufung.

Globaler Kontext

Wird in einem globalen Kontext verwendet, der an das globale Objekt gebunden ist, wie Fenster in einem Webbrowser.

this; // Fenster

Innerhalb der Objektmethode

Wird innerhalb einer Objektmethode verwendet, die an das nächstgelegene umschließende Objekt gebunden ist. Das Objekt ist der neue Kontext der diese Schlüsselwort. Beachten Sie, dass Sie nicht das Funktion () zur ES6-Syntax fun: () => this.context denn dadurch wird der Kontext verändert.

const obj = {
  Kontext: "object",
  fun: function() {
    return this.context;
  }
};

obj.fun(); // Objekt

In diesem Beispiel mit einem verschachtelten Objekt, diese bezieht sich immer noch auf seinen engsten Kontext.

const nestedObj = {
  Kontext: "parent",
  child: {
    context: "Kind",
    fun: function() {
      return this.context;
    }
  }
};

nestedObj.child.fun(); // child

Kontextlose Funktion

Wird innerhalb einer Funktion verwendet, die keinen Kontext (kein Objekt als Elternteil) hat, der an den globalen Kontext gebunden ist, auch wenn die Funktion innerhalb des Objekts definiert ist.

Beachten Sie, dass wir var Kontext anstelle von let/const Kontext denn lassen Sie und const den von der Variable eingeschlossenen Kontext ändern. var immer dem globalen Ausführungskontext am nächsten ist. lassen Sie und const Variablen nur in einem lokalen Blockbereich deklarieren.

var context = "global";

const obj = {
  context: "object",
  funA: function() {
    Funktion funB() {
      const context = "Funktion";
      return this.context;
    }
    return funB(); // Aufruf ohne Kontext
  }
};

obj.funA(); // global

Innerhalb der Konstruktorfunktion

Wird innerhalb einer Funktion verwendet, die der Konstruktor des neuen, an sie gebundenen Objekts ist.

var context = "global";

Funktion Obj() {
  this.context = "Obj-Kontext";
}

const obj = new Obj();
obj.context; // Obj-Kontext

Innerhalb der in der Prototypenkette definierten Funktion

Wird innerhalb einer in der Prototypenkette definierten Funktion verwendet, um ein an sie gebundenes Objekt zu erzeugen.

const ProtoObj = {
  fun: function() {
    return this.name;
  }
};

const obj = Object.create(ProtoObj);
obj.name = "foo";
obj.fun(); // foo

Innerhalb Aufruf() und apply()-Funktionen

Aufruf() und apply() sind JavaScript Funktionen. Mit ihnen kann ein Objekt Methoden verwenden, die einem anderen Objekt gehören. Aufruf() nimmt Argumente getrennt auf, wobei apply() nimmt sie als Array auf.

diese ist hier an neuen Kontext gebunden, der in Aufruf() und apply() Methoden.

const objA = {
  Kontext: "objA",
  fun: function() {
    console.log(this.context, arguments);
  }
};

const objB = {
  Kontext: "objB"
};

objA.fun(1, 2); // objA, [1, 2]
objA.fun.call(objB, 1, 2, 3); // objB, [1, 2, 3]
objA.fun.apply(objB, [1, 2, 3, 4]); // objB, [1, 2, 3, 4]

Innerhalb der Funktion bind()

bind() ist ebenfalls eine JavaScript-Methode. Sie erzeugt eine neue Funktion, die Folgendes hat diese auf den ersten Parameter gesetzt, der an bind()**.**

const objA = {
  Kontext: "objA",
  fun: function() {
    console.log(this.context, arguments);
  }
};

const objB = {
  Kontext: "objB"
};

const fun = objA.fun.bind(objB, 1, 2);
fun(3, 4); // objB, [1, 2, 3, 4]

Innerhalb von Ereignisbehandlern

Wird in jedem Event-Handler verwendet (zum Beispiel, addeventListener, onclick, attachEvent), wird es an das DOM-Element gebunden, an das das Ereignis angehängt wurde.

document.querySelector(".foo").addEventListener("click", function() {
  this; // verweist auf das Div-Element "foo".
});

ES6-Pfeilfunktion

Innerhalb der Pfeilfunktion verwendet, ist sie immer an ihren lexikalischen Bereich gebunden. In der Pfeilfunktion können Sie die Funktion nicht neu zuweisen. diese in irgendeiner Weise.

const globalArrowFunction = () => this;

globalArrowFunction(); // Fenster

const obj = {
  Kontext: "object",
  funA: () => this,
  funB: function() {
    return () => {
      return this.context;
    };
  }
};

obj.funA(); // Fenster
obj.funB()(); // Objekt

Lesen Sie mehr:

• Die größten Herausforderungen bei der Entwicklung kundenspezifischer Software
• Was sind die Unterschiede zwischen einem Softwarehaus und einer IT-Personalvermittlungsagentur?