Eine kurze Einführung in diese Regel in JavaScript

Wenn Sie die Regeln dieser Methode ermitteln möchten, ist es eigentlich sehr einfach, die Aufrufposition zu überprüfen. Folgen Sie dem Editor von Script Home, um diesen Artikel zu lernen.

Ein paar Regeln bestimmen, was das in einer Funktion ist.

Es ist eigentlich sehr einfach herauszufinden, was das ist. Die allgemeine Regel besteht darin, dies festzustellen, wenn eine Funktion aufgerufen wird, indem überprüft wird, wo sie aufgerufen wurde. Es folgt diesen Regeln, die im Folgenden in der Reihenfolge ihrer Priorität beschrieben werden.

Regeln

1 Wenn Sie beim Aufruf einer Funktion das Schlüsselwort new verwenden, handelt es sich in der Funktion um ein brandneues Objekt.

function ConstructorExample() {
  console.log(this);
  this.value = 10;
  console.log(this);
}
new ConstructorExample();
// -> {}
// -> { value: 10 }

2. Wenn Sie apply, call oder bind verwenden, um eine Funktion aufzurufen, dann ist dies in der Funktion das als Parameter übergebene Objekt.

function fn() {
  console.log(this);
}
var obj = {
  value: 5
};
var boundFn = fn.bind(obj);
boundFn();   // -> { value: 5 }
fn.call(obj); // -> { value: 5 }
fn.apply(obj); // -> { value: 5 }

3. Wenn die Funktion als Methode aufgerufen wird, das heißt, wenn die Funktion in Punktnotation aufgerufen wird, dann ist dies das Objekt, das diese Funktion hat als Attribut. Mit anderen Worten: Wenn sich ein Punkt links von einem Funktionsaufruf befindet, ist dies das Objekt links vom Punkt.

var obj = {
  value: 5,
  printThis: function() {
    console.log(this);
  }
};
obj.printThis(); // -> { value: 5, printThis: ƒ }

4. Wenn die Funktion als reine Funktion aufgerufen wird, also ohne eine der oben genannten Bedingungen, dann ist dies das globale Objekt. In einem Browser ist dies das Fensterobjekt.

function fn() {
  console.log(this);
}
// 如果在浏览器里调用：
fn(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

Beachten Sie, dass diese Regel tatsächlich mit der dritten Regel identisch ist. Der Unterschied besteht darin, dass Funktionen, die nicht als Methoden deklariert sind, automatisch zu Attributen des globalen Objektfensters werden. Daher handelt es sich tatsächlich um einen impliziten Methodenaufruf. Wenn wir fn() aufrufen, wird es vom Browser tatsächlich als window.fn() verstanden, das ist also window.

console.log(fn === window.fn); // -> true

5. Wenn mehrere der oben genannten Regeln gelten, legt diejenige mit der höheren Priorität diesen Wert fest.

6. Wenn es sich um eine Pfeilfunktion in ES2015 handelt, ignoriert sie alle oben genannten Regeln und erhält den Bereich, der sie enthält, als Wert davon, wenn sie erstellt wird. Um herauszufinden, was das ist, gehen Sie einfach eine Zeile nach oben, von wo aus Sie die Pfeilfunktion erstellt haben, und sehen Sie, was das dort ist. Der Wert davon ist in einer Pfeilfunktion derselbe.

const obj = {
  value: 'abc',
  createArrowFn: function() {
    return () => console.log(this);
  }
};
const arrowFn = obj.createArrowFn();
arrowFn(); // -> { value: 'abc', createArrowFn: ƒ }

Rückblickend auf die dritte Regel: Wenn wir obj.createArrowFn() aufrufen, ist dies in createArrowFn obj, da dies ein Methodenaufruf ist. Daher wird obj in ArrowFn daran gebunden. Wenn wir eine Pfeilfunktion im globalen Bereich erstellen, ist dieser Wert Fenster.

Regeln anwenden

Schauen wir uns ein Codebeispiel an und wenden diese Regeln an. Probieren Sie es aus und sehen Sie, ob Sie herausfinden können, was dies in verschiedenen Funktionsaufrufen ist.

Bestimmen Sie, welche Regel angewendet wird

var obj = {
  value: 'hi',
  printThis: function() {
    console.log(this);
  }
};
var print = obj.printThis;
obj.printThis(); // -> {value: "hi", printThis: ƒ}
print(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

obj.printThis() gehört zur dritten Regel, dem Methodenaufruf. Andererseits fällt print() unter die vierte Regel, einen reinen Funktionsaufruf. Für print() haben wir beim Aufruf keine New-, Bind/Call/Apply- oder Dot-Notation verwendet, daher entspricht es Regel 4, dies ist das globale Objektfenster.

Wenn mehrere Regeln angewendet werden

Wenn mehrere Regeln angewendet werden, verwenden Sie die Regel mit der höheren Priorität in der Liste.

var obj1 = {
  value: 'hi',
  print: function() {
    console.log(this);
  },
};
var obj2 = { value: 17 };

Wenn Regel 2 und Regel 3 gleichzeitig gelten, hat Regel 2 Vorrang.

obj1.print.call(obj2); // -> { value: 17 }

Wenn Regel 1 und Regel 3 gleichzeitig gelten, hat Regel 1 Vorrang.

new obj1.print(); // -> {}

Bibliothek

Einige Bibliotheken binden diesen Wert manchmal absichtlich an a in einigen Funktionen. Normalerweise ist der nützlichste Wert in einer Funktion daran gebunden. jQuery bindet dies beispielsweise an ein DOM-Element und löst ein Ereignis in einem Rückruf aus. Wenn eine Bibliothek einen Wert hat, der nicht den oben genannten Regeln entspricht, lesen Sie bitte die Dokumentation der Bibliothek sorgfältig durch. Es ist wahrscheinlich, dass sie mit bind gebunden wird.

Zusammenfassung

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in diese Regel in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!