Wie verhält sich „this“ in jQuery und regulärem JavaScript anders und welche Auswirkungen hat es auf die Arbeit mit DOM-Elementen und Funktionsaufrufen?

„this“ in jQuery und JavaScript verstehen

In jQuery bezieht sich „this“ normalerweise auf das DOM-Element, das der Funktion zugeordnet ist gerufen wird. Beispielsweise stellt „this“ in einem Ereignisrückruf das Element dar, das das Ereignis ausgelöst hat.

Beispiel:

<code class="javascript">$("div").click(function() {
  // Here, `this` will be the DOM element for the div that was clicked,
  // so you could (for instance) set its foreground color:
  this.style.color = "red";
});</code>

jQuery verwendet „this“ auch in Funktionen wie html() und every():

Beispiel (html):

<code class="javascript">$("#foo div").html(function() {
  // Here, `this` will be the DOM element for each div element
  return this.className;
});</code>

Beispiel (each):

<code class="javascript">jQuery.each(["one", "two", "three"], function() {
  // Here, `this` will be the current element in the array
  alert(this);
});</code>

„this“ in generischem JavaScript

Außerhalb von jQuery bezieht sich „this“ in JavaScript im Allgemeinen auf ein Objekt. Dies trifft jedoch im strengen Modus von ES5 nicht unbedingt zu, wo „this“ einen beliebigen Wert haben kann.

Der Wert von „this“ in einem Funktionsaufruf wird dadurch bestimmt, wie die Funktion aufgerufen wird. Es kann explizit festgelegt werden, indem die Funktion über eine Objekteigenschaft aufgerufen wird, oder es kann standardmäßig das globale Objekt (Fenster in Browsern) verwendet werden.

Beispiel:

<code class="javascript">var obj = {
  firstName: "Fred",
  foo: function() {
    alert(this.firstName);
  }
};

obj.foo(); // alerts "Fred"</code>

In diesem Beispiel wird „this“ explizit auf das obj-Objekt gesetzt, damit es auf die Eigenschaft „firstName“ zugreifen kann.

Es ist jedoch wichtig zu beachten, dass die Funktion foo nicht grundsätzlich an ein bestimmtes Objekt gebunden ist. Es kann mit einem anderen „this“-Wert mithilfe von Funktionen wie .call und .apply aufgerufen werden:

<code class="javascript">function foo(arg1, arg2) {
  alert(this.firstName);
  alert(arg1);
  alert(arg2);
}

var obj = {firstName: "Wilma"};
foo.call(obj, 42, 27); // alerts "Wilma", "42", and "27"</code>

In diesem Beispiel wird foo mit dem obj-Objekt als „this“ aufgerufen, wodurch es auf das zugreifen kann firstName-Eigenschaft.

Der strikte Modus von ES5 führt zu weiterer Komplexität und ermöglicht, dass „this“ Nicht-Objektwerte wie null, undefiniert oder Grundelemente wie Zeichenfolgen und Zahlen haben kann:

<code class="javascript">(function() {
  "use strict";   // Strict mode

  test("direct");
  test.call(5, "with 5");
  test.call(true, "with true");
  test.call("hi", "with 'hi'");

  function test(msg) {
    console.log("[Strict] " + msg + "; typeof this = " + typeof this);
  }
})();</code>

Ausgabe:

[Strict] direct; typeof this = undefined
[Strict] with 5; typeof this = number
[Strict] with true; typeof this = boolean
[Strict] with 'hi'; typeof this = string

Im strikten Modus wird „dies“ durch die Aufrufstelle und nicht durch die Definition der Funktion bestimmt und kann Nicht-Objektwerte haben.

Das obige ist der detaillierte Inhalt vonWie verhält sich „this“ in jQuery und regulärem JavaScript anders und welche Auswirkungen hat es auf die Arbeit mit DOM-Elementen und Funktionsaufrufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!