So bestimmen Sie, wohin dies in JavaScript zeigt

Es wird gesagt, dass JavaScript eine sehr flexible Sprache ist. In der Tat kann ich sagen, dass es eine verwirrende Sprache ist, die ich in diesem Artikel mit Ihnen teilen sollte Ein Blick

Es wird gesagt, dass JavaScript eine sehr flexible Sprache ist, aber tatsächlich kann man auch sagen, dass es eine verwirrende Sprache ist. Es kombiniert funktionale Programmierung und objektorientierte Programmierung, gepaart mit der dynamischen Sprachfunktion, und ist äußerst leistungsstark (tatsächlich kann es nicht mit C++, ^_^, verglichen werden).

Dies

• in JS wird innerhalb der Funktion

• erstellt Zeigt auf das Objekt, das beim Aufruf an die Funktion gebunden ist (ein Bissen)

• dies kann nicht zugewiesen werden, kann aber per Aufruf/Anwenden geändert werden

Verzeichnis

* Ein Sonderfall
* Beginnen Sie mit der Beurteilung
* Regel 1: Dies in der Objektmethode zeigt auf das Objekt selbst (außer in die Form von Pfeilfunktionen)
* Regel 2: Dies in einer mehrstufigen verschachtelten Funktion zeigt auf dies, was der aktuellsten Funktion entspricht, die dies enthält
* Regel 3: Im Fall von Pfeilfunktionen und Funktionen in Nicht-Objekt-Methoden zeigt dies auf das Fenster
* Übungssatz
* Dies in einer gewöhnlichen Funktion
* Nachdem die Funktion ausgeführt wurde, geben Sie dies in einer anderen Funktion zurück (in einer gewöhnlichen Funktion)
* Dies in einer mehrschichtigen verschachtelten Funktion (Timer- und Pfeilfunktion) 1
* Dies (Timer- und Pfeilfunktion) in mehrstufigen verschachtelten Funktionen 2

Ein Sonderfall

Bevor wir offiziell beginnen, sprechen wir über einen Sonderfall.

// 构造函数
function Student(name) {
 this.name = name
}
// 创建小明和小红两个实例
var XM = new Student('xiaoming')
var XH = new Student('xiaohong')
// 输出信息
console.log(XM) // Student {name: "xiaoming"}
console.log(XH) // Student {name: "xiaohong"}

Im Konstruktor wird der Wert dafür an die neu erstellte Instanz gebunden, wenn die Instanz erstellt wird. Dies gilt nicht für die folgende Beurteilungsmethode und wird daher hier erläutert.

Beginnen Sie mit der Beurteilung

Das Folgende ist ein typisches Beispiel, unsere Analyse beginnt hier.

var x = {
 name: 'bw2',
 getName1: function() {
 console.log(this)
 },
 getName2: function() {
 setTimeout(() => {
  console.log(this)
 },0)
 },
 getName31: () => {
 console.log(this)
 },
 getName32: function() {
 return function() {
  console.log(this)
 }
 }
}
x.getName1() // {name: "bw2", getName1: ƒ}
x.getName2() // {name: "bw2", getName1: ƒ}
x.getName31() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
x.getName32()() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}

Regel 1: Dies in der Objektmethode zeigt auf das Objekt selbst (außer in Form von Pfeilfunktionen)

var x = {
 name: 'bw2',
 getName1: function() {
 console.log(this)
 }
}
x.getName1() // {name: "bw2", getName1: ƒ}

Regel 2: Dies zeigt in einer mehrstufigen verschachtelten Funktion auf dies, was der neuesten Funktion entspricht, die dies enthält.

Die Pfeilfunktion hat keinen unabhängigen Gültigkeitsbereich, also fahren Sie fort zur äußeren Ebene und erreichen Sie diesen getName: function(){}. Dann ist er es. Dieser Zeiger entspricht dem Zeiger this in dieser Funktion. Gemäß Regel 1 weist dies auf das Objekt selbst hin.

var x = {
 name: 'bw2',
 getName2: function() {
 console.log(this) // 等同于此处的this
 setTimeout(() => {
  console.log(this) // 原始的this位置
 },0)
 }
}
x.getName2() // {name: 'bw2', getName1: ƒ}

Wir können versuchen, es im Browser auszuführen und die Ergebnisse zu sehen.

Regel 3: Bei Pfeilfunktionen und Funktionen in Nicht-Objekt-Methoden zeigt dies auf das Fenster

Gemäß Regel 2 zeigt dies auf die nächstgelegene Funktion, also diese hier Äquivalent zur Rückgabe von This in der Funktion ist nicht this in der Objektmethode, daher zeigt es auf das Globale.

Fühlt es sich etwas seltsam an? Doch die Praxis hat gezeigt, dass dies der Fall ist.

var x = {
 name: 'bw2',
 getName31: () => {
 console.log(this)
 },
 getName32: function() {
 return function() {
  console.log(this)
 }
 }
}
x.getName31() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
x.getName32()() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}

Übungsset

Sie können die Ergebnisse gerne nach Regeln beurteilen und erraten eins bis drei und testen Sie es im Browser. Sie können auch mit den Testergebnissen antworten und diese gemeinsam besprechen.

Aufgrund meiner eingeschränkten Fähigkeiten kann diese Regelreihe in manchen Fällen fehlschlagen. Jeder ist herzlich willkommen, gemeinsam zu diskutieren.

Im Folgenden ist die Zeit, die Fragen zu beantworten.

Dies in einer gewöhnlichen Funktion

function x() {
 console.log(this)
}
x()

Nachdem die Funktion ausgeführt wurde, gibt sie dies in einer anderen Funktion zurück (in einer gewöhnliche Funktion)

function xx(){
 return function() {
 console.log(this)
 }
}
xx()()

dies (Timer- und Pfeilfunktion) in mehrstufigen verschachtelten Funktionen 1

var x = {
 name: 'bw2',
 getName: () => {
 setTimeout(() => {
  console.log(this)
 },0)
 }
}
x.getName()

Dies (Timer- und Pfeilfunktion) 2 in mehrschichtigen verschachtelten Funktionen

var x = {
 name: 'bw2',
 getName: () => {
 setTimeout(function() {
  console.log(this)
 },0)
 }
}
x.getName()

Auch diese Regel ist experimentell und wurde nicht im großen Maßstab getestet Tests und garantiert nicht unter allen Umständen konsistente Ergebnisse. Wenn Sie auf eine Situation stoßen, in der das Regelurteil fehlschlägt, hinterlassen Sie bitte eine Nachricht und besprechen Sie dies gemeinsam.

Das obige ist der detaillierte Inhalt vonSo bestimmen Sie, wohin dies in JavaScript zeigt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!