Explication détaillée de ce pointage en javascript

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. Nous allons maintenant résumer ce pointage en js. Tout d'abord, vous devez comprendre quelques concepts :

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

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

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

4 : Vous pouvez changer le point de ceci via l'appel, l'application et la liaison

ci-dessous 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

Combinant la quatrième et les deux premières règles : la fonction func est globale et est montée sous l'objet window par défaut. Cela pointe vers son appelant, qui est 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, ceci. est un défaut dans la conception JavaScript. La méthode de conception correcte est la fonction interne qui doit être liée à l'objet correspondant à sa fonction externe. Afin d'éviter ce défaut de conception, des programmeurs JavaScript intelligents ont mis au point. la méthode de substitution de variable. Par convention, la variable est généralement nommée ainsi. La 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, cela pointe vers son appelant, selfIntroduction() L'appelant de la méthode est user, donc à l'intérieur de la méthode selfIntroduction(), cela pointe vers son objet parent, user, et la raison pour laquelle la méthode de boucle génère un résultat indéfini est le défaut de conception JavaScript que j'ai mentionné ci-dessus. Dans ce cas, nous choisissons généralement de mettre en cache. ceci 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

Lorsque vous regardez ce code, selfIntroduction() est assignée à la variable globale other, et la méthode other() est appelée other est montée sous la fonction globale objet window. , et l'objet window Il n'y a pas d'attributs userName et age, 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(). 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(&#39;btn&#39;);
    btn.addEventListener(&#39;click&#39;,function () {
      console.log(this); //<p id="btn">点击我</p>
    })

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

4:nouveau mot clé (Constructeur)

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

I n'entrera pas dans les détails à ce sujet. 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 évoquée au début : les flèches es6 In la fonction, cela pointe vers le créateur, pas vers l'appelant. fun1 est créé sous la fonction globale, donc cela pointe vers la fenêtre globale, tandis que fun2 est créé sous l'objet data, et cela pointe vers l'objet data, donc à l'intérieur de func2. fonction, cela pointe vers l'objet de données. Personnellement, je pense que ce point de la fonction flèche es6 est une amélioration des défauts de conception JavaScript que j'ai mentionnés ci-dessus (connaissances personnelles).

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 maintenant 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 exécuteront la méthode immédiatement après la liaison, tandis que la méthode bind renverra un. fonction exécutable.

Pour résumer en grande partie tout cela, voici les 4 points que j'ai mentionnés au début

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 : Via appeler, postuler, lier Vous pouvez changer le pointeur de ceci

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!