Introduction détaillée à la portée des fonctions JavaScript et à ce pointeur

L'éditeur suivant vous apportera une compréhension approfondie de la portée et de ce pointeur des fonctions js. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour y jeter un œil.

La portée de la fonction et ce pointeur sont des parties très importantes de js. Pour clarifier cette chose, nous avons besoin d'une logique. Voyons comment se déroule ma logique...

.

Ce qui suit est un aperçu. Vous pouvez directement sélectionner les éléments qui vous intéressent et les lire.

• Méthode de définition de fonction : définition directe (sous fenêtre, définition interne), méthode objet, méthode prototype d'objet

• Méthode d'appel de fonction : Appel direct, appel/; apply, with

• Pour les fonctions et méthodes d'objets directement définies, la portée par défaut est la chaîne de portée où elle est définie.

• Pour les fonctions directement définies, cela pointe vers window.

• Pour les méthodes objet, ceci pointe vers l'objet instancié (correspondant au cas où l'objet instancié renvoie ceci par défaut).

• Utilisez call/apply pour modifier le point this de la méthode

• Lors de la définition d'une fonction ou d'une méthode, vous pouvez modifier sa chaîne de portée via with.

Parlons-en en détail ci-dessous :

La définition des fonctions, telle que mentionnée dans le plan, peut être divisée en deux types : définition directe (fenêtre, définie en interne), méthodes objet (ou méthodes prototype d'objet). À partir de l'exemple de code ci-dessous, vous pouvez voir que les fonctions fn1 et fn2 et la méthode de l'objet doFunction sont utilisées. Lorsque la fonction utilise name, la valeur de name provient du champ correspondant.

var name = &#39;window下的name<br/>&#39;;
var resultCon;
function fn1() {
  resultCon.innerHTML += name;
}

function MyObj() {
  var name = &#39;MyObj下的name<br/>&#39;;
  this.doFunction = function() {
    resultCon.innerHTML += name;

Que se passe-t-il si vous remplacez "name" par "this.name" lorsque vous utilisez la valeur de name ? Exemple :

var name = &#39;window下的name<br/>&#39;;
var resultCon;
function fn1() {
  resultCon.innerHTML += this.name;
}

function MyObj() {
  var name = &#39;MyObj下的name<br/>&#39;;
  this.doFunction = function() {
    resultCon.innerHTML += this.name;

À en juger par les résultats, nous pouvons vérifier les éléments 4 et 5 dans le plan. Nous pouvons également voir que ceci et la portée sont deux ensembles de chaînes distincts. .Suivez votre propre logique de requête variable.La logique de requête spécifique sera mentionnée dans l'analyse des performances ci-dessous, il est recommandé de jeter d'abord un œil aux connaissances de base de la "chaîne de portée js".

Concernant la méthode d'appel de fonction, j'utilise l'exemple suivant pour illustrer les éléments 2 et 6 du plan :

var name = &#39;window下的name<br/>&#39;;
var resultCon;
function fn1() {
  resultCon.innerHTML += this.name;
}

function MyObj() {
  var name = &#39;MyObj下的name<br/>&#39;;
  this.doFunction = function() {
    resultCon.innerHTML += this.name;

call et Apply sont utilisés pour changer le pointeur this de la fonction appelée. L'utilisation de with consiste à modifier le domaine de requête des variables dans la fonction appelée. Nous supprimons cela avant call et name dans l'exemple ci-dessus et ajoutons with pour démontrer la fonction de with.

var name = &#39;window下的name<br/>&#39;;
var resultCon;
function fn1(myScope) {
  with (myScope) {
    resultCon.innerHTML += name;
  }
}

function MyObj(myScope) {
  var name = &#39;MyObj下的name<br/>&#39;;

Voyant que l'utilisation de with n'est pas pratique, vous devez ajouter with dans la fonction appelée Certaines personnes peuvent se demander si elle peut être appelée comme suit. changer le rôle global du domaine variable sans changer la fonction appelée ?

with (myScope) {
  fn1();
  fn2();
  var obj = new MyObj();
  obj.doFunction();
}

Désolé, non ! Par conséquent, call et apply peuvent être utilisés partout dans certains frameworks matures, mais with est rarement utilisé lors de l'utilisation de JSHint pour détecter la syntaxe js, with est marqué d'un petit point rouge dans certains guides de codage js, il est également recommandé de l'utiliser. le moins possible avec, car avec les modifications de la chaîne de requête par défaut des variables, cela provoquera une certaine confusion pour les responsables ultérieurs, et il y a certaines considérations en matière de performances, veuillez donc utiliser with avec prudence.

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!