Kurz dazu in Javascript-Funktionen

Vorwort

Es gibt im Internet eine Menge Informationen darüber, wie das funktioniert, aber ich hatte die ganze Zeit nicht genug, um es vollständig herauszufinden.



Vor kurzem habe ich dies dennoch getan, wie es mir scheint, und möchte es mit Ihnen teilen.

Ohne viele Worte

Wir werden sowohl einfache als auch komplexe Beispiele behandeln - so werden alle interessiert sein.



Es gibt zwei Hauptpunkte, die wir betrachten werden:



(1) Für Funktionen, die über function () {} deklariert wurden, wird dies zum Zeitpunkt des Aufrufs berechnet.

(2) Für Pfeilfunktionen wird dies beim Erstellen der Funktion definiert.



Beginnen wir mit einigen einfachen Beispielen.

function globalFunc() {
  console.log(this);
}
const globalArrowFunc = () => {
  //      ,  this - window/undefined
  //   ,   use strict   this === undefined
  console.log(this);
}

globalFunc(); // undefined
globalArrowFunc(); // undefined

Was ist, wenn wir dem Objekt diese Funktionen hinzufügen:

const cat = {
  name: 'Pirate',
  globalFunc,
  globalArrowFunc
};

cat.globalFunc(); // { name: 'Pirate', ... }
cat.globalArrowFunc(); // undefined

Lass es uns herausfinden.



Durch Aufrufen von cat.globalFunc () wurde uns ein Katzenobjekt zurückgegeben. Zum besseren Verständnis können Sie sich das so vorstellen: "Wenn Sie Funktionen aufrufen, die über function () {} deklariert wurden, entspricht dies dem Objekt vor dem Punkt."



Warum hat cat.globalArrowFunc () dann undefiniert für uns zurückgegeben? Tatsache ist, dass dieser Wert für eine Pfeilfunktion zum Zeitpunkt ihrer Erstellung bestimmt wird, und als wir ihn erstellt haben, war dieser Wert undefiniert.



Nun erstellen wir ein Objekt mit einigen Methoden:

const dog = {
  name: 'Viking',
  //        
  //       
  localFunc: function() {
    console.log(this);
  },
  localArrowFunc: () => {
    console.log(this);
  }
};

dog.localFunc(); // { name: 'Viking', ... }
dog.localArrowFunc(); // undefind

Warum so?



dog.localFunc () - weil das Objekt vor point dog.

dog.localArrowFunc () - da dies innerhalb des Objekts auch ein globales Objekt ist, was bedeutet, dass wir undefiniert werden.



Lassen Sie uns unser Beispiel etwas komplizieren.

const dog = {
  name: 'Viking',
  localFunc: function() {
    const arrowFuncInLocalFunc = () => {
      console.log(this);
    };
    function funcInLocalFunc() {
      console.log(this);
    };
    arrowFuncInLocalFunc(); // 1
    funcInLocalFunc(); // 2
  },
  localArrowFunc: () => {
    const arrowFuncInLocalArrowFunc = () => {
      console.log(this);
    };
    function funcInLocalArrowFunc() {
      console.log(this);
    };
    arrowFuncInLocalArrowFunc(); // 3
    funcInLocalArrowFunc(); // 4
  }
};

dog.localFunc();
// 1 - { name: 'Viking', ... }
// 2 - undefind
dog.localArrowFunc();
// 3 - undefind
// 4 - undefind

Lass es uns herausfinden!



(1) arrowFuncInLocalFunc () // {name: 'Viking',…}



Warum passiert das?



Denn als wir das Objekt erstellt haben, haben wir es mit der Funktion localFunc geschrieben. Und, wie wir uns aus den vorhergehenden Beispielen erinnern, ist dies für sie das Objekt vor dem Punkt, dh {Name: 'Wikinger', ...}. Lassen Sie uns nun über die Funktion arrowFuncInLocalFunc selbst sprechen - sie wird sofort erstellt, wenn localFunc aufgerufen wird, und merkt sich den Wert, der sich an der Stelle ihrer Erstellung befand. Wir erhalten also den PfeilFuncInLocalFunc, der uns zurückgibt {name: 'Viking',…}.



(2) funcInLocalFunc () // undefind



Warum passiert das?



Wie bereits erwähnt, wird dieser Wert für Funktionen, die über function () {} deklariert wurden, zum Zeitpunkt des Aufrufs bestimmt und entspricht dem Objekt vor dem Punkt. In diesem Fall haben wir kein Objekt vor dem Punkt, was bedeutet, dass dies ein globales Objekt ist oder in unserem Fall undefiniert.



(3) arrowFuncInLocalArrowFunc () // undefined



Warum passiert das?



Dieses Beispiel ist (1) sehr ähnlich. Nur unsere Funktion arrowFuncInLocalArrowFunc wird innerhalb derselben Pfeilfunktion erstellt. Wir erinnern uns auch daran, dass Pfeilfunktionen zum Zeitpunkt ihrer Deklaration aus ihrer Umgebung in diesen Wert schreiben. Unsere Funktion wurde jedoch in localArrowFunc erstellt, für das dies nicht definiert ist. Dies bedeutet, dass dies für arrowFuncInLocalArrowFunc undefiniert ist.



(4) funcInLocalArrowFunc () // undefined



Warum passiert das?



Genau aus dem gleichen Grund wie in (2) für funcInLocalFunc



Nehmen wir ein anderes Beispiel:

const cat = {
  name: 'Tom',
  getFuncWithTomName: function() {
    return () => {
      console.log(this.name);
    }
  }
};

const mouse = {
  name: 'Jerry',
  logName: cat.getFuncWithTomName()
};

mouse.logName(); // Tom o_O !?

Dies liegt daran, dass getFuncWithTomName eine Pfeilfunktion erstellt und zurückgibt. Wenn die Pfeilfunktion erstellt wird, entspricht dies getFuncWithTomName. Und für getFuncWithTomName ist dies das Objekt vor dot (cat).

Gesamt

Der Kontext für Pfeilfunktionen wird beim Erstellen festgelegt.



Der Kontext für function () {} wird beim Aufruf definiert und entspricht dem Objekt vor dem Punkt.