Résumé et explication détaillée de ce pointeur en javaScript

L'éditeur suivant vous apportera une synthèse de ce pointage basée sur javaScript. 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 et jetons un coup d'œil.

Le pointage de ceci en JavaScript a toujours été une préoccupation pour les collègues front-end, et c'est également le premier choix pour les questions d'entretien. Résumons maintenant le pointage de ceci. en js. Tout d'abord, vous devez comprendre quelques concepts :

1 : Les variables globales sont montées sous l'objet fenêtre par défaut

2 : Généralement, cela pointe vers son appelant

3 : Dans la fonction flèche d'es6, cela pointe vers le créateur, pas l'appelant

4 : Vous pouvez changer la direction de cela en appelant, en postulant et en vous liant

Analysons-le en détail

1 : Lors de l'appel d'une fonction

(mode non strict)

const func = function () {
  console.log(this);
  const func2 = function () {
   console.log(this);
  };
  func2(); //Window
 };
 func(); //Window

(mode strict)

'use strict'
 const func = function () {
  console.log(this);
  const func2 = function () {
   console.log(this);
  };
  func2(); //undefined
 };
 func(); //undefined

Combinaison de la quatrième et de la première règles : func est une fonction globale et est monté par défaut Sous l'objet window, cela pointe vers son appelant, window, donc l'objet window est affiché. Cependant, en mode strict, cela n'est pas autorisé à pointer vers la variable globale window, donc la sortie n'est pas définie (func2 pointe vers. la fenêtre globale par défaut lorsque la fonction est appelée directement. En fait, il s'agit d'un défaut dans la conception JavaScript. La méthode de conception correcte est que celle de la fonction interne doit être liée à l'objet correspondant à sa fonction externe. Ce défaut de conception, les programmeurs JavaScript intelligents ont mis au point des méthodes de substitution de variable, par convention, la variable est généralement nommée ainsi (cette méthode sera discutée ensuite).

2 : En tant que méthode objet

const user = {

  userName: '小张',
  age: 18,
  selfIntroduction: function () {
   const str = '我的名字是:' + this.userName + ",年龄是:" + this.age;
   console.log(str);

   const loop = function () {
    console.log('我的名字是:' + this.userName + ",年龄是:" + this.age);
   };

   loop();  //我的名字是:undefined,年龄是:undefined

  }
 };

 user.selfIntroduction(); //我的名字是:小张,年龄是:18

Selon notre première règle, ce Points à son appelant. L'appelant de la méthode selfIntroduction() est l'utilisateur, donc à l'intérieur de la méthode selfIntroduction(), cela pointe vers son objet parent, l'utilisateur, et la raison pour laquelle la méthode de boucle génère un résultat non défini est le javascript que j'ai mentionné ci-dessus. défaut de conception. Dans ce cas, nous choisissons généralement de le mettre en cache dans la méthode selfIntroduction().

const user = {
  userName: '小张',
  age: 18,
  selfIntroduction: function () {
   const str = '我的名字是:' + this.userName + ",年龄是:" + this.age;
   console.log(str);

   const that=this;

   const loop = function () {
    console.log('我的名字是:' + that.userName + ",年龄是:" + that.age);
   };

   loop();  //我的名字是:小张,年龄是:18

  }
 };

 user.selfIntroduction(); //我的名字是:小张,年龄是:18

A ce moment, ce point de la boucle est idéal.

const user={

  userName:'小张',
  age:18,
  selfIntroduction:function(){
   const str='我的名字是:'+this.userName+",年龄是:"+this.age;
   console.log(str); 
  }
 };

 const other =user.selfIntroduction;
 other(); //我的名字是:undefined,年龄是:undefined

 const data={
  userName:'小李',
  age:19,
 };
 data.selfIntroduction=user.selfIntroduction;
 data.selfIntroduction(); //我的名字是:小李,年龄是:19

En regardant ce code, attribuez selfIntroduction() à la variable globale other, appelez la méthode other(), et other est monté sous l'objet fenêtre de fonction globale , il n'y a pas d'attributs userName et age sous l'objet window, donc la sortie n'est pas définie. Le deuxième morceau de code déclare l'objet data, qui contient les attributs username et age. Rappelez-vous notre deuxième règle. Généralement, cela pointe vers son appelant. Tout le monde comprendra que data est l'appelant de la fonction selfIntroduction(), donc le userName. et l'âge des données sont affichés.

3 : Déclenché comme un événement en html

<body>

 <p id="btn">点击我</p>

</body>

const btn=document.getElementById('btn');

  btn.addEventListener('click',function () {
   console.log(this); //<p id="btn">点击我</p>
  })

Dans ce cas, la deuxième règle est effectivement suivie. Généralement, ceci pointe vers son appelant, et cela pointe vers la source de l'événement, qui est l'événement.

4 : nouveau mot clé (constructeur)

const fun=function(userName){
  this.userName=userName;
 }
 const user=new fun('郭德纲'); 
 console.log(user.userName); //郭德纲

Je n'entrerai pas dans les détails sur ce Oui, le mot-clé new construit une instance d'objet et l'attribue à l'utilisateur, donc userName devient un attribut de l'objet utilisateur.

5:es6 (fonction flèche)

const func1=()=>{
  console.log(this); 
 };
 func1(); //Window

const data={
  userName:'校长',
  selfIntroduction:function(){
   console.log(this); //Object {userName: "校长", selfIntroduction: function}

   const func2=()=>{
    console.log(this); //Object {userName: "校长", selfIntroduction: function}
   }

   func2();
  }

 }

 data.selfIntroduction();

Tout le monde regarde la troisième règle que j'ai mentionnée au début : dans la fonction flèche d'es6, cela pointe vers le créateur, pas l'appelant. fun1 est créé sous la fonction globale, donc cela pointe vers la fenêtre globale. , et fun2 est dans l'objet Créé sous data, cela pointe vers l'objet de données, donc à l'intérieur de la fonction func2, cela pointe vers l'objet de données. Je pense personnellement que ce point de la fonction flèche es6 est une amélioration par rapport au JavaScript. défauts de conception que j'ai mentionnés ci-dessus (connaissance personnelle).

6 : Changer le point de ceci

Les trois fonctions call, apply et bind peuvent artificiellement changer le point de this de la fonction . Je n’entrerai pas dans les détails des différences entre les trois ici, j’expliquerai les différences entre les trois en détail dans les prochains blogs. Prenons un exemple.

const func=function(){
 console.log(this);
};

func(); //window

func.apply({userName:"郭德纲"}); //Object {userName: "郭德纲"}

Ces trois méthodes peuvent artificiellement changer la direction de ceci. La différence est que call et apply lieront cette méthode. sera exécuté immédiatement après avoir défini ceci, et la méthode bind renverra une fonction exécutable.

Une grande partie de cela peut être résumée par les 4 points que j'ai mentionnés au début

1 : Global les variables sont montées par défaut dans l'objet Sous la fenêtre

2 : Généralement, cela pointe vers son appelant

3 : Dans la fonction flèche d'es6, cela pointe vers le créateur, pas l'appelant

4 : Par appel, postuler, Bind peut changer la direction de cela

Pour être honnête, c'est la première fois que j'écris un blog. Je suis vraiment nerveux. Est-ce que quelqu'un lira mon blog ? Cela pourrait-il être mal écrit ? ...J'ai beaucoup mieux réfléchi et j'ai résumé : j'accepte les corrections sur d'éventuelles lacunes.

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!