Hallo ,

In diesem Artikel werden wir versuchen, die verschiedenen möglichen Werte des thisSchlüsselworts in Abhängigkeit von dem Kontext zu erklären, in dem es in JavaScript verwendet wird.

Globaler Geltungsbereich

Bezieht sich im globalen Bereich thisauf das globale Objekt ( windowim Web und globalin Node.js).

globalThiskönnte auch als plattformunabhängiger Weg zum Erreichen des globalen Objekts verwendet werden.

// global scope (web)

console.log(this === window); // true
console.log(this === globalThis); // true

Innerhalb einer Nicht-Pfeilfunktion hängt der Wert von thisdavon ab, wie die Funktion aufgerufen wird.

Wird als eigenständige Funktion aufgerufen

• Bezieht sich im nicht strikten Modus auf das globale Objekt: this

function getThis() {
  return this;
}

console.log(getThis() === globalThis); // true

"use strict"

function getThis() {
  return this;
}

console.log(getThis() === undefined); // true

const bar = {
  getThis: function() {
    return this;
  }
};

console.log(bar.getThis() === bar); // true

const baz = {};
baz.getThis = bar.getThis;

console.log(baz.getThis() === baz); // true

// Called as a standalone function
const getThis = bar.getThis;
console.log(getThis() === globalThis); // true (`false` in strict mode)

Klassenmethoden verhalten sich genauso wie Methoden in Objektliteralen.

Pfeilfunktionen

Innerhalb einer Pfeilfunktion ist der Wert von this gleich dem des einschließenden lexikalischen Kontexts .

Mit anderen Worten, beim Auswerten einer Pfeilfunktion erstellt die JS-Engine keine neue thisBindung, sondern verwendet die im umgebenden Bereich verfügbare :

// (1) `this` equals to `globalThis` here

const foo = {
  getThis: () => this
};

console.log(foo.getThis() === foo); // false
console.log(foo.getThis() === globalThis); // true (1)
// (1) `this` equals to `globalThis` here

const bar = {
  getArrowFn: function() {
    // (2) `this` equals to `bar` or `baz` here 
    // depending on how the function is called below
    
    return () => this;
  }
};

console.log(bar.getArrowFn()() === bar); // true (2)
console.log(bar.getArrowFn()() === globalThis); // false (1)

const baz = {};
baz.getArrowFn = bar.getArrowFn;

console.log(baz.getArrowFn()() === baz); // true (2)
console.log(baz.getArrowFn()() === globalThis); // false (1)

Funktionskonstruktoren

Innerhalb einer Funktion, die als Konstruktor (mit dem newSchlüsselwort) verwendet thiswird, ist sie an das neu zu erstellende Objekt gebunden, unabhängig davon, wie auf die Funktion zugegriffen wird:

function Bar() {
  this.baz = 42;
}

let a = new Bar();
console.log(a.baz); // 42
const bar = {
  baz: function() {
    this.foo = 42;
  }
};

let a = new bar.baz();
console.log(a.foo); // 42
console.log(bar.foo); // undefined

function Bar() {
  this.baz = 42;
  return { baz: 44 };
}

let a = new Bar();
console.log(a.baz); // 44 (not 42)

anwenden(), aufrufen()

Die Methoden call()und apply()können verwendet werden, um den Wert von this in Nicht-Pfeilfunktionen explizit festzulegen:

function getThis() {
  return this;
}

const bar = {
  getThis: function() {
    return this;
  }
};

console.log(getThis() === globalThis); // true
console.log(bar.getThis() === bar); // true

const myThis = {};

console.log(getThis.call(myThis) === myThis); // true
console.log(getThis.apply(myThis) === myThis); // true

console.log(bar.getThis.call(myThis) === myThis); // true
console.log(bar.getThis.apply(myThis) === myThis); // true

Bei Verwendung für eine Pfeilfunktion wird der thisParameter ignoriert (Sie können jedoch weiterhin Funktionsargumente mit diesen Methoden übergeben):

// (1) `this` equals to `globalThis` here

const getThis = () => this;

console.log(getThis() === globalThis); // true

const myThis = {};

console.log(getThis.call(myThis) === globalThis); // true
console.log(getThis.apply(myThis) === globalThis); // true

Die bind()Funktion wird verwendet, um eine neue Funktion zu erstellen, die an ein bestimmtes Objekt gebunden ist.

Das heißt, wenn die neue Funktion aufgerufen thiswird, bezieht sich das Schlüsselwort auf das Objekt, an das es gebunden ist:

function getThis() {
  return this;
}

console.log(getThis() === globalThis); // true

const myThis = {};
const getMyThis = getThis.bind(myThis);

console.log(getMyThis() === myThis); // true
console.log(getMyThis.call(globalThis) === myThis); // true
console.log(getMyThis.apply(globalThis) === myThis); // true

Bei Verwendung für eine Pfeilfunktion wird der thisParameter ignoriert (Sie können jedoch weiterhin Funktionsargumente mit diesen Methoden übergeben):

// (1) `this` equals to `globalThis` here

const getThis = () => this;

console.log(getThis() === globalThis); // true

const myThis = {};
const getMyThis = getThis.bind(myThis);

console.log(getMyThis() === globalThis); // true
console.log(getMyThis.call(myThis) === globalThis); // true
console.log(getMyThis.apply(myThis) === globalThis); // true