Comment « ceci » se comporte-t-il différemment dans jQuery et en JavaScript standard, et quelles sont les implications pour l'utilisation des éléments DOM et des appels de fonction ?

Comprendre "ceci" dans jQuery et JavaScript

Dans jQuery, "ceci" fait généralement référence à l'élément DOM associé à la fonction étant appelé. Par exemple, dans un rappel d'événement, "this" représente l'élément qui a déclenché l'événement.

Exemple :

<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 utilise également "this" dans les fonctions comme html() et each() :

Exemple (html) :

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

Exemple (chacun) :

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

"this" en JavaScript générique

En dehors de jQuery, "this" en JavaScript fait généralement référence à un objet. Cependant, cela n'est pas strictement vrai dans le mode strict d'ES5, où "this" peut avoir n'importe quelle valeur.

La valeur de "this" dans un appel de fonction est déterminée par la manière dont la fonction est invoquée. Il peut être explicitement défini en appelant la fonction via une propriété d'objet, ou il peut être par défaut l'objet global (fenêtre dans les navigateurs).

Exemple :

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

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

Dans cet exemple, "this" est explicitement défini sur l'objet obj, afin qu'il puisse accéder à la propriété firstName.

Cependant, il est important de noter que la fonction foo n'est intrinsèquement liée à aucun objet spécifique. Il peut être appelé avec une valeur "this" différente en utilisant des fonctions telles que .call et .apply :

<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>

Dans cet exemple, foo est appelé avec l'objet obj comme "this", lui permettant d'accéder au propriété firstName.

Le mode strict d'ES5 introduit une complexité supplémentaire, permettant à "this" d'avoir des valeurs non-objet comme null, undefined ou des primitives comme des chaînes et des nombres :

<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>

Sortie :

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

En mode strict, "this" est déterminé par le site d'appel plutôt que par la définition de la fonction, et il peut avoir des valeurs non-objet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!