Maison > interface Web > js tutoriel > Explication détaillée de la façon de l'utiliser en JavaScript

Explication détaillée de la façon de l'utiliser en JavaScript

巴扎黑
Libérer: 2017-09-20 09:29:28
original
1754 Les gens l'ont consulté

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 }
Copier après la connexion
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 }
Copier après la connexion
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: ƒ }
Copier après la connexion
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: ƒ, ...}
Copier après la connexion
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
Copier après la connexion
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: ƒ }
Copier après la connexion
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: ƒ, ...}
Copier après la connexion
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 };
Copier après la connexion
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 }
Copier après la connexion
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(); // -> {}
Copier après la connexion

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.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal