Detaillierte Erklärung dieses Verweises in Javascript

Das Zeigen darauf in JavaScript war schon immer ein Problem für Front-End-Kollegen und ist auch die erste Wahl für verschiedene Interviewfragen. Jetzt werden wir das Zeigen darauf in js zusammenfassen. Zunächst müssen Sie einige Konzepte verstehen:

1: Globale Variablen werden standardmäßig unter dem Fensterobjekt gemountet.

2: Im Allgemeinen verweist dies auf sein Aufruf

3: In der Pfeilfunktion von es6 zeigt dies auf den Ersteller, nicht auf den Aufrufer

4: Der Sinn kann durch Aufrufen, Anwenden und Binden geändert werden

Das Folgende Lassen Sie es uns im Detail analysieren

1: Beim Aufrufen einer Funktion

(nicht strenger Modus)

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

(strenger Modus)

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

Kombination der vierten und ersten beiden Regeln: Die Funktion func ist global und wird standardmäßig unter dem Fensterobjekt gemountet. Dies zeigt auf seinen Aufrufer Fenster, sodass das Fensterobjekt ausgegeben wird. Im strikten Modus darf dies jedoch nicht auf das globale Variablenfenster verweisen, sodass die Ausgabe undefiniert ist (func2 zeigt standardmäßig auf das globale Fenster, wenn die Funktion direkt aufgerufen wird. Tatsächlich Dies ist ein Fehler im JavaScript-Design. Die richtige Designmethode ist die Bindung an das Objekt, das seiner äußeren Funktion entspricht. Um diesen Designfehler zu vermeiden, sind intelligente JavaScript-Programmierer gekommen Konventionell wird die Variable so genannt. Die Methode wird als nächstes besprochen.

2: Als Objektmethode

Gemäß unserer ersten Regel zeigt dies auf seinen Anrufer, selfIntroduction() Der Anrufer Der Wert der Methode ist „user“, daher verweist dies innerhalb der Methode „selfIntroduction()“ auf ihr übergeordnetes Objekt „user“, und der Grund, warum die Schleifenmethode „undefiniert“ ausgibt, ist der oben erwähnte JavaScript-Designfehler. In diesem Fall entscheiden wir uns normalerweise für die Zwischenspeicherung dies in der Methode selfIntroduction().

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

Zu diesem Zeitpunkt ist dieser Punkt der Schleife ideal.

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

Beim Betrachten dieses Codes wird selfIntroduction() der globalen Variablen other zugewiesen und die other()-Methode wird aufgerufen, other wird unter der

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

globalen Funktion

window-Objekt bereitgestellt , Fensterobjekt Es gibt keine Benutzernamen- und Altersattribute, daher ist die Ausgabe undefiniert. Der zweite Codeabschnitt deklariert das Datenobjekt, das die Attribute „Benutzername“ und „Alter“ enthält. Im Allgemeinen wird dies auf den Aufrufer der Funktion „selfIntroduction()“ verweisen und Alter der Daten ausgegeben.

3: Ausgelöst als Ereignis in HTML

In diesem Fall wird im Allgemeinen die zweite Regel befolgt an seinen Aufrufer, und dieser verweist auf die Ereignisquelle des Ereignisses, das Ereignis.

<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>
    })

4:neues Schlüsselwort (Konstruktor)

I Ich werde nicht näher darauf eingehen. Das Schlüsselwort new erstellt eine Objektinstanz und weist sie dem Benutzer zu, sodass userName zu einem Attribut des Benutzerobjekts wird.

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

5:es6 (Pfeilfunktion)

Jeder schaut sich die dritte Regel an, die ich am Anfang erwähnt habe: es6 Pfeile In Die Funktion verweist auf den Ersteller, nicht auf den Aufrufer. fun1 wird unter der globalen Funktion erstellt, sodass diese auf das globale Fenster verweist, während fun2 unter den Objektdaten erstellt wird und diese auf das Datenobjekt zeigt, also innerhalb von func2 Funktion, dies verweist auf das Datenobjekt. Ich persönlich denke, dass dieser Punkt der es6-Pfeilfunktion eine Verbesserung gegenüber den oben erwähnten JavaScript-Designfehlern darstellt (persönliche Kenntnisse).

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();

6: Den Sinn dieser Funktion ändern Die drei Funktionen call, apply und bind können den Sinn dieser Funktion künstlich verändern Ich werde hier nicht näher auf die Unterschiede zwischen den drei eingehen, sondern sie in zukünftigen Blogs ausführlich erläutern. Nehmen wir nun eine als Beispiel.

Diese drei Methoden können die Richtung künstlich ändern. Der Unterschied besteht darin, dass call und apply die Methode unmittelbar nach der Bindung ausführen, während die bind-Methode eine zurückgibt ausführbare Funktion.

const func=function(){
   console.log(this);
 }; 
 func(); //window
 func.apply({userName:"郭德纲"}); //Object {userName: "郭德纲"}

Um vieles davon zusammenzufassen sind die 4 Punkte, die ich am Anfang erwähnt habe1: Globale Variablen werden unter dem Fensterobjekt gemountet standardmäßig

2: Im Allgemeinen zeigt dies auf seinen Aufrufer

3: In der Pfeilfunktion von es6 zeigt dies auf den Ersteller, nicht auf den Aufrufer

4: Durch aufrufen, anwenden, binden Sie können den Zeiger davon ändern

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung dieses Verweises in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!