Une brève introduction à cette règle en JavaScript

Si vous souhaitez déterminer quelles sont les règles, la méthode est en fait très simple. En vérifiant sa position d'appel, déterminez-la lorsque la fonction est appelée. Suivons l'éditeur de Script Home pour apprendre à travers cet article

Quelques règles déterminent ce que cela signifie dans une fonction.

C’est en fait très simple de déterminer de quoi il s’agit. La règle générale est de déterminer cela lorsqu'une fonction est appelée en vérifiant où elle a été appelée. Il suit ces règles, décrites ensuite par ordre de priorité.

Règles

1. Si vous utilisez le nouveau mot-clé lors de l'appel d'une fonction, alors ceci dans la fonction est un tout nouvel objet.

function ConstructorExample() {
  console.log(this);
  this.value = 10;
  console.log(this);
}
new ConstructorExample();
// -> {}
// -> { value: 10 }

2. Si vous utilisez apply, call ou bind pour appeler une fonction, alors ceci dans la fonction est l'objet transmis en paramètre.

function fn() {
  console.log(this);
}
var obj = {
  value: 5
};
var boundFn = fn.bind(obj);
boundFn();   // -> { value: 5 }
fn.call(obj); // -> { value: 5 }
fn.apply(obj); // -> { value: 5 }

3. Si la fonction est appelée en tant que méthode, c'est-à-dire si la fonction est appelée en utilisant la notation par points, alors c'est l'objet qui a cette fonction. comme attribut. En d’autres termes, lorsqu’un point se trouve à gauche d’un appel de fonction, il s’agit de l’objet situé à gauche du point.

var obj = {
  value: 5,
  printThis: function() {
    console.log(this);
  }
};
obj.printThis(); // -> { value: 5, printThis: ƒ }

4. Si la fonction est appelée comme une fonction pure, c'est-à-dire qu'elle est appelée sans aucune des conditions ci-dessus, alors c'est l'objet global. Dans un navigateur, il s'agit de l'objet window.

function fn() {
  console.log(this);
}
// 如果在浏览器里调用：
fn(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

Notez que cette règle est en fait la même que la troisième règle. La différence est que les fonctions non déclarées comme méthodes deviendront automatiquement des attributs de la fenêtre d'objet globale. Il s’agit donc en réalité d’un appel de méthode implicite. Lorsque nous appelons fn(), le navigateur l'interprètera comme window.fn(), c'est donc window.

console.log(fn === window.fn); // -> true

5. Si plusieurs règles ci-dessus s'appliquent, celle avec la priorité la plus élevée définira cette valeur.

6. S'il s'agit d'une fonction fléchée dans ES2015, alors elle ignorera toutes les règles ci-dessus et recevra la portée la contenant comme valeur lors de sa création. Pour déterminer ce que c'est, remontez simplement d'une ligne à partir de l'endroit où vous avez créé la fonction flèche et voyez ce que c'est là. La valeur de this dans une fonction flèche est la même.

const obj = {
  value: 'abc',
  createArrowFn: function() {
    return () => console.log(this);
  }
};
const arrowFn = obj.createArrowFn();
arrowFn(); // -> { value: 'abc', createArrowFn: ƒ }

En repensant à la troisième règle, lorsque nous appelons obj.createArrowFn(), ceci dans createArrowFn est obj, car il s'agit d'un appel de méthode. Par conséquent, obj sera lié à cela dans arrowFn. Si nous créons une fonction de flèche dans la portée globale, alors cette valeur sera window.

Application des règles

Regardons un exemple de code et appliquons ces règles. Essayez-le et voyez si vous pouvez comprendre ce que c'est dans différents appels de fonction.

Déterminer quelle règle est appliquée

var obj = {
  value: 'hi',
  printThis: function() {
    console.log(this);
  }
};
var print = obj.printThis;
obj.printThis(); // -> {value: "hi", printThis: ƒ}
print(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

obj.printThis() appartient à la troisième règle, l'appel de méthode. print(), en revanche, relève de la règle 4, un pur appel de fonction. Pour print(), nous n'avons pas utilisé de notation new, bind/call/apply ou point lors de l'appel, cela correspond donc à la règle 4, c'est la fenêtre d'objet globale.

Lorsque plusieurs règles sont appliquées

Lorsque plusieurs règles sont appliquées, utilisez la règle ayant la priorité la plus élevée dans la liste.

var obj1 = {
  value: 'hi',
  print: function() {
    console.log(this);
  },
};
var obj2 = { value: 17 };

Si la règle 2 et la règle 3 s'appliquent en même temps, la règle 2 prévaut.

obj1.print.call(obj2); // -> { value: 17 }

Si la règle 1 et la règle 3 s'appliquent en même temps, la règle 1 prévaut.

new obj1.print(); // -> {}

Bibliothèque

Certaines bibliothèques lient parfois délibérément cette valeur à a dans certaines fonctions. Habituellement, la valeur la plus utile est liée à cela dans une fonction. Par exemple, jQuery le lie à un élément DOM et déclenche un événement dans un rappel. Si une bibliothèque a une valeur this qui n'est pas conforme aux règles ci-dessus, veuillez lire attentivement la documentation de la bibliothèque. Elle est probablement liée à l'aide de bind.

Résumé

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!