Pouvez-vous comprendre ce problème de pointage de JS ? jetez un oeil à cet article

Comment démarrer rapidement avec VUE3.0 : Apprenez

le pointage de ceci.

Dans les différentes introductions que nous avons vues sur la façon de déterminer la méthode de pointage de ceci, la phrase "cela pointe finalement vers l'objet qui l'appelle" est considérée comme la phrase "cela pointe finalement vers l'objet qui l'appelle". Mais face à nous, nous avons tendance à nous perdre dans diverses situations. Sur la base de ma compréhension de diverses situations, j'ai proposé une phrase : "Flèches, timing et structure, regardez les situations particulières, regardez le numéro de point pour les appels ordinaires, ne regardez pas devant pour les points ultérieurs, puis jugez basé sur le principe le plus proche, et la dernière chose qui reste est la fenêtre." .

Fonction flèche

La fonction flèche elle-même n'a pas cela, donc il n'y a pas de changement this. Elle capture l'extérieur this en utilisant

var name = "windowsName";
var une = {
    nom: "Cerise",
    fn() {
      setTimeout(()=>{
        console.log(this.name); 
      },0)
    }
}

a.fn() //Analyse Cherry

 : Tout d'abord, l'objet a appelle la fonction fn, donc celle de la fonction fn pointe vers l'objet a, puis la flèche capture le this extérieur, alors ce n'est pas cela dans setTimeout, mais celui de la fonction fn, donc à la fin Obtenez le nom dans l'objet a.

Le timer

est celui de la fonction de rappel à l'intérieur de la fonction delay qui pointe vers l'objet global window

var name = "windowsName";
var une = {
    nom: "Cerise",
    fn() {
      setTimeout(fonction (){
        console.log(this.name); 
      },0)
    }
}

a.fn() //analyse windowsName

 : Tout d'abord, l'objet a appelle la fonction fn, puis la fonction de rappel dans setTimeout est ici une fonction anonyme, qui est une fonction ordinaire. Ensuite, celle-ci dans la fonction anonyme pointe vers window

var name =. "NomWindows" ;
varb={
  nom : "setTimeoutName"
}
var une = {
    nom: "Cerise",
    fn() {
      setTimeout((fonction (){
        console.log(this.name); 
      }).bind(b),0)
    }
}

a.fn() //setTimeoutName

analyse : d'abord, l'objet a appelle la fonction fn, puis la fonction de rappel dans setTimeout est ici une fonction anonyme, qui est une fonction ordinaire. Ensuite, celle-ci dans la fonction anonyme pointe vers la fenêtre, mais. utilisez bind pour changer la fonction anonyme. Ceci pointe vers l'objet b, donc le nom

du constructeur

dans l'objet b pointe finalement vers l'objet instance créé dans le constructeur.

Remarque : si un objet est renvoyé dans le constructeur, il n'y aura pas de nouvelle instance. objet lors de sa création, mais ceci L'objet renvoyé par

la fonction fn(){
  cet âge = 37 ;
}

var a = nouveau fn();
console.log(a.age); // 37
a.âge = 38 ;
console.log(fn); // { this.age = 37;
console.log(a.age); // 38

Analyse : Ici, nous créons l'objet instance a via le constructeur, ce qui équivaut à ouvrir un nouvel emplacement et à copier le contenu du constructeur. Ensuite, nous avons l'objet a. À ce moment-là, cela pointe vers l'objet.a, notre modification du contenu de l'objet a n'affecte pas le

jugement du nombre

. Jugez ce point et suivez le principe de proximité

var a = {.
  âge:10,
  b : {
      âge:12,
      fn(){
          console.log(this.age); 
      }
  }
}
abfn(); //12

Analyse : L'objet a appelle la fonction fn de l'objet b. Il y en a deux devant la fonction fn . Alors le plus proche est l'objet b, donc celui de la fonction fn pointe vers l'objet b. la dernière chose obtenue est l’âge de l’objet b

var a = {
  âge:10,
  b : {
      âge:12,
      fn(){
          console.log(this.age); //non défini
      }
  }
}
var c = {
  âge:20,
}

vard = {
  âge:30,
}
abfn.bind(c).bind(d)(); //20

analyse : l'objet a appelle la fonction fn de l'objet b, puis utilise bind pour changer la direction de celui-ci. À ce moment, fn a . quel que soit le précédent . il suffit de regarder à l'arrière, puis la dernière liaison change ce point en c, alors ce point de la fonction fn est l'objet c, et ce que vous obtenez est la

de pratique

externalFunc() {

   console.log(this) // { x : 1 }
   fonction fonction() {
    console.log(this) // Fenêtre 
   }
   amusant()
} 

externalFunc.bind({ x : 1 })()

obj = {
  fonction() {
    const arrowFunc = () => {
      console.log(this._name)
    }

    retour arrowFunc
  },

  _nom : "obj",
}

obj.func()() //obj

func = obj.func
func()() //non défini

obj.func.bind({ _name: "newObj" })()() //nouvelObj

obj.func.bind()()() //non défini

obj.func.bind({ _name: "bindObj" }).apply({ _name: "applyObj" })() //bindObj

apply, call, bind

Utilisez les fonctions apply, call et bind pour changer la direction de. this. Ce qui précède this

La différence entre

thisArg , [ argsArray] call(thisArg, arg1, arg2, ...)

La différence entre les fonctions apply et call réside dans les paramètres transmis après this. dans apply est un tableau, et ce qui est passé dans call C'est le paramètre étendu

bind(thisArg[, arg1[, arg2[, ...]]])()

• et la fonction bind crée une nouvelle fonction
• . à appeler manuellement. this est désigné par bind() Le premier paramètre et les paramètres restants seront utilisés comme paramètres de la nouvelle fonction à utiliser lors de l'appel.

S'il y a des erreurs, veuillez me corriger ! ! Merci à tous d'avoir lu !

Matériel de référence

https://juejin.cn/post/6946021671656488991#comment

[Recommandations du didacticiel vidéo associé : front-end Web]

Ce qui précède explique comment comprendre le problème de pointage de JS ? Jetez un œil aux détails de cet article. Pour plus d'informations, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !