JavaScript dies

Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Beispiel

const person = {
    firstName: "John",
  lastName : "Doe",
    id       : 5566,
    fullName : function() {
      return this.firstName + " " + this.lastName;
    }
};

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>
<p>Because <b>fullName</b> is a method of the person object.</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

Was ist das?

In JavaScript bezieht sich das Schlüsselwort this auf ein Objekt.

Welches Objekt hängt davon ab, wie dies aufgerufen (verwendet oder aufgerufen) wird?

Das Schlüsselwort this bezieht sich je nach Verwendung auf unterschiedliche Objekte:

  • In einer Objektmethode bezieht sich this auf das Objekt.

  • Allein dies bezieht sich auf das globale Objekt.

  • In einer Funktion bezieht sich this auf das globale Objekt.

  • In einer Funktion ist im strikten Modus dies undefiniert.

  • In einem Ereignis bezieht sich this auf das Element, das das Ereignis empfangen hat.

  • Methoden wie call(), apply() und bind() kann dies auf jedes Objekt verweisen.

Notiz

dies ist keine Variable. Es ist ein Schlüsselwort. Sie können den Wert von this nicht ändern.

dies in einer Methode

Bei Verwendung in einer Objektmethode bezieht sich this auf das Objekt.

Im Beispiel oben auf dieser Seite bezieht sich this auf das Objekt person.

Weil die Methode fullName eine Methode des Objekts person ist.

fullName : function() {
    return this.firstName + " " + this.lastName;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>
<p>Because <b>fullName</b> is a method of the person object.</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

Das Allein

Bei alleiniger Verwendung bezieht sich this auf das globale Objekt.

Weil dies im globalen Bereich ausgeführt wird.

In einem Browserfenster ist das globale Objekt [object Window]:

Beispiel

let x = this;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the window object:</p>

<p id="demo"></p>

<script>
let x = this;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Im strengen Modus bezieht sich this bei alleiniger Verwendung auch auf das globale Objekt:

Beispiel

 "use strict";
let x = this;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the window object:</p>
<p id="demo"></p>

<script>
"use strict";
let x = this;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

dies in einer Funktion (Standard)

In einer Funktion ist das globale Objekt die Standardbindung für dies.

In einem Browserfenster ist das globale Objekt [object Window]:

Beispiel

function myFunction() {
    return this;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the the window object:</p>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction();

function myFunction() {
  return this;
}
</script>

</body>
</html>

dies in einer Funktion (streng)

Der strenge Modus von JavaScript erlaubt keine Standardbindung.

Wenn es also in einer Funktion im strikten Modus verwendet wird, ist dies undefiniert.

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In a function, by default, <b>this</b> refers to the global object.</p>

<p>Strict mode does not allow default binding, so <b>this</b> is:</p>
<p id="demo"></p>

<script>
"use strict";
document.getElementById("demo").innerHTML = myFunction();

function myFunction() {
  return this;
}
</script>

</body>
</html>

dies in Event-Handlern

In HTML-Ereignishandlern bezieht sich this auf das HTML-Element, das das empfangen hat Ereignis:

Beispiel

 <button onclick="this.style.display='none'">
  Click to 
  Remove Me!
</button>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<button onclick="this.style.display='none'">Click to Remove Me!</button>

</body>
</html>

Objektmethodenbindung

In diesen Beispielen ist this das Personenobjekt:

Beispiel

const person = {
    firstName  : "John",
    lastName   : "Doe",
    id         : 5566,
    myFunction : function() {
    return this;
  }
};

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the <b>person object</b>.</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName  : "John",
  lastName   : "Doe",
  id     : 5566,
  myFunction : function() {
    return this;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.myFunction();
</script>

</body>
</html>

Beispiel

const person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    fullName : function() {
    return this.firstName + " " + 
this.lastName;
  }
};

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>
<p>Because <b>fullName</b> is a method of the person object.</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

d. h. this.firstName ist die firstName-Eigenschaft von this (dem Personenobjekt).

Explizite Funktionsbindung

Die Methoden call() und apply() sind vordefinierte JavaScript-Methoden.

Sie können beide verwendet werden, um eine Objektmethode mit einem anderen Objekt als Argument aufzurufen.

Siehe auch:

Die Funktion call()-Methode

Die Funktion apply()-Methode

Die Funktion bind()-Methode

Das folgende Beispiel ruft person1.fullName mit person2 als Argument auf, this bezieht sich auf person2, auch wenn fullName eine Methode von person1 ist:

Beispiel

const person1 = {
    fullName: function() {
      return this.firstName + " " + this.lastName;
    }
}

const person2 = {
    firstName:"John",
    lastName: "Doe",
}

// Return "John Doe":
person1.fullName.call(person2);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example <strong>this</strong> refers to person2, even if it is a method of person1:</p>

<p id="demo"></p>

<script>
const person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}

const person2 = {
  firstName:"John",
  lastName: "Doe",
}

let x = person1.fullName.call(person2); 
document.getElementById("demo").innerHTML = x; 
</script>

</body>
</html>

Funktionsausleihe

Mit der Methode bind() kann ein Objekt eine Methode von einem anderen Objekt ausleihen.

In diesem Beispiel werden zwei Objekte erstellt (Person und Mitglied).

Das Member-Objekt leiht sich die Fullname-Methode vom Person-Objekt:

Beispiel

const person = {
  firstName:"John",
  lastName: "Doe",
    fullName: function () {
    return this.firstName + " " + this.lastName;
    }
}

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Function bind()</h1>

<p>This example creates 2 objects (person and member).</p>
<p>The member object borrows the fullname method from person:</p> 

<p id="demo"></p>

<script>
const person = {
  firstName:"John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

document.getElementById("demo").innerHTML = fullName();
</script>

</body>
</html>

Dieser Vorrang

Um festzustellen, auf welches Objekt sich dies bezieht; Verwenden Sie die folgende Reihenfolge.

Precedence

Objekt

1

binden()

2

apply() und call()

3

Objektmethode

4

Globaler Geltungsbereich

Befindet sich this in einer Funktion, die mit bind() aufgerufen wird?

Befindet sich this in einer Funktion, die mit apply() aufgerufen wird?

Befindet sich this in einer Funktion, die mit call() aufgerufen wird?

Befindet sich this in einer Objektfunktion (Methode)? <p>Ist dies in einer Funktion im globalen Bereich.