Zusammenfassung und detaillierte Erklärung dieses Zeigers in JavaScript

Der folgende Editor liefert Ihnen eine Zusammenfassung dieses Verweises basierend auf JavaScript. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und werfen wir einen Blick darauf.

Das Zeigen darauf war für Front-End-Kollegen schon immer ein Problem, und es ist auch die erste Wahl für Interviewfragen in js. Zunächst müssen Sie einige Konzepte verstehen:

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

2: Im Allgemeinen zeigt dies auf den Aufrufer

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

4: Sie können die Richtung ändern, indem Sie anrufen, anwenden und binden

Lassen Sie es uns im Detail analysieren

1: Beim Aufruf 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 Regel: func ist eine globale Funktion und ist Standardmäßig gemountet Unter dem Fensterobjekt zeigt dies auf seinen Aufrufer, Fenster, sodass das Fensterobjekt ausgegeben wird. Im strikten Modus darf dies jedoch nicht auf die globale Variable window zeigen, sodass die Ausgabe undefiniert ist (func2 zeigt auf). Das globale Fenster wird standardmäßig direkt aufgerufen. Dies ist in der Tat ein Fehler im JavaScript-Design. Die richtige Entwurfsmethode sollte an das Objekt gebunden werden, das seiner äußeren Funktion entspricht Aufgrund dieses Konstruktionsfehlers haben intelligente JavaScript-Programmierer Methoden zum Ersetzen von Variablen entwickelt. Konventionell wird die Variable im Allgemeinen so genannt (diese Methode wird als Nächstes besprochen).

2: Als Objektmethode

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

Gemäß unserer ersten Regel ist dies Punkte zu seinem Aufrufer. Der Aufrufer der selfIntroduction()-Methode ist der Benutzer, also verweist dies innerhalb der selfIntroduction()-Methode auf sein übergeordnetes Objekt, den Benutzer, und der Grund, warum die Schleifenmethode undefiniert ausgibt, ist das oben erwähnte Javascript In diesem Fall entscheiden wir uns normalerweise dafür, dies in der selfIntroduction()-Methode zwischenzuspeichern.

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

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 other =user.selfIntroduction;
 other(); //我的名字是:undefined,年龄是:undefined

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

Beim Betrachten dieses Codes wird selfIntroduction() der globalen Variablen other zugewiesen, die other()-Methode aufgerufen und other unter der globalen Variablen gemountet Bei der Funktion „Fensterobjekt“ gibt es unter dem Fensterobjekt keine Attribute „Benutzername“ und „Alter“, 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

<body>

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

</body>

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

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

In diesem Fall wird tatsächlich die zweite Regel befolgt, die auf den Aufrufer und die Ereignisquelle des Ereignisses verweist.

4: neues Schlüsselwort (Konstruktor)

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

Ich werde nicht auf Details eingehen In diesem Fall erstellt das Schlüsselwort new eine Objektinstanz und weist sie dem Benutzer zu, sodass userName zu einem Attribut des Benutzerobjekts wird.

5:es6 (Pfeilfunktion)

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

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

6: Ändern Sie den Sinn dieser Funktion

Die drei Funktionen „Aufruf“, „Anwenden“ und „Binden“ können den Sinn dieser Funktion künstlich ä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 eines als Beispiel: Diese drei Methoden können die Richtung künstlich ändern. Der Unterschied besteht darin, dass Aufruf und Anwendung diese Methode binden wird sofort nach dem Festlegen ausgeführt und die Bindungsmethode gibt eine ausführbare Funktion zurück.

Vieles davon lässt sich mit den 4 Punkten zusammenfassen, die ich eingangs erwähnt habe

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

func(); //window

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

1: Global Variablen werden standardmäßig im Unterfensterobjekt

2 gemountet: Im Allgemeinen verweist dies auf seinen Aufrufer

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

4: Durch Anruf, apply, bind kann den Zeiger davon ändern

Um ehrlich zu sein, ist es das erste Mal, dass ich einen Blog schreibe. Wird jemand meinen Blog lesen? Könnte es falsch geschrieben sein? ...Ich habe es mir genauer überlegt und es zusammengefasst: Ich begrüße Korrekturen etwaiger Mängel.

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