So starten Sie schnell mit VUE3.0: Erfahren Sie,
In den verschiedenen Einführungen, die wir zum Bestimmen der Zeigemethode dafür gesehen haben, wird der Satz „dies zeigt letztendlich auf das Objekt, das es aufruft“ als das angesehen Kern, aber angesichts von Wir neigen dazu, in einer Vielzahl von Situationen verwirrt zu sein. Basierend auf meinem Verständnis verschiedener Situationen habe ich einen Satz vorgeschlagen : „Pfeile, Timing und Struktur, schauen Sie sich besondere Situationen an, schauen Sie sich die Punktnummer für gewöhnliche Anrufe an, schauen Sie nicht nach vorne für die späteren Punkte und urteilen Sie dann.“ basierend auf dem nächstgelegenen Prinzip, und das letzte verbleibende Ding ist das Fenster.
Pfeilfunktion
Die Pfeilfunktion selbst hat dies nicht, daher gibt es keine Änderung. Sie erfasst die äußere Funktion this mithilfe von
var name = "windowsName"; var a = { Name: „Kirsche“, fn() { setTimeout(()=>{ console.log(dieser.name); },0) } } a.fn() // Kirschanalyse
: Zuerst ruft Objekt a die fn-Funktion auf, sodass diese der fn-Funktion auf Objekt a zeigt, und dann erfasst der Pfeil das äußere this, dann ist es nicht this in setTimeout, sondern this von die fn-Funktion, also am Ende den Namen in Objekt a abrufen.
Der Timer
der Rückruffunktion innerhalb der Verzögerungsfunktion zeigt auf das globale Objektfenster
var name = „windowsName“; var a = { Name: „Kirsche“, fn() { setTimeout(function (){ console.log(dieser.name); },0) } } a.fn() //windowsName-
Analyse: Zuerst ruft das Objekt a die fn-Funktion auf, und dann ist die Rückruffunktion in setTimeout hier eine anonyme Funktion, die eine gewöhnliche Funktion ist. Dann zeigt dies in der anonymen Funktion auf den Fenstervariablennamen
= "windowsName"; var b={ Name: „setTimeoutName“ } var a = { Name: „Kirsche“, fn() { setTimeout((function (){ console.log(dieser.name); }).bind(b),0) } } a.fn() //setTimeoutName-
Analyse: Zuerst ruft das Objekt a die fn-Funktion auf, und dann ist die Rückruffunktion in setTimeout hier eine anonyme Funktion, die eine gewöhnliche Funktion ist. Dann zeigt dies in der anonymen Funktion auf das Fenster, aber Verwenden Sie bind, um die anonyme Funktion zu ändern, sodass der Namenskonstruktor
in
Objekt b schließlich auf das erstellte Instanzobjekt im Konstruktor verweist.
Wenn ein Objekt im Konstruktor zurückgegeben wird, gibt es keine neue Instanz Objekt beim Erstellen, aber dieses Das von
der Funktion fn(){zurückgegebene Objekt
this.age = 37; } var a = new fn(); console.log(a.age); // 37 Alter = 38; console.log(fn); // { this.age = 37; console.log(a.age); // 38
Analyse: Hier erstellen wir das Instanzobjekt a über den Konstruktor, was dem Öffnen eines neuen Ortes und dem Kopieren des Inhalts des Konstruktors entspricht Wenn dies auf das Objekt a verweist, hat unsere Änderung des Inhalts in Objekt a keinen Einfluss auf die Verabschiedung des Punktzahlurteils des Konstruktors
.
.
Sie das Proximity-Prinzip
var a = {. Alter: 10, B: { Alter: 12, fn(){ console.log(this.age); } } } abfn(); //12
Analyse: Objekt a ruft die fn-Funktion auf .
Es gibt zwei vor der fn-Funktion, also zeigt diese der fn-Funktion auf Objekt b Als letztes wird das Alter des Objekts b
var a = {ermittelt.
Alter: 10, B: { Alter: 12, fn(){ console.log(this.age); //undefiniert } } } var c = { Alter:20, } var d = { Alter:30, } abfn.bind(c).bind(d)(); //20
.
: Objekt a ruft die fn-Funktion von Objekt b auf und verwendet dann bind, um die Richtung davon zu ändern. Schauen Sie sich einfach die Rückseite an, dann ändert die letzte Bindung diesen Punkt in c, dann .
dieser Punkt der fn-Funktion das Objekt c, und Sie erhalten die Altersübungsfunktion
äußereFunc
() {von Objekt c
console.log(this) // { x: 1 } Funktion func() { console.log(this) // Fenster } Spaß() } äußereFunc.bind({ x: 1 })()
obj = { func() { const ArrowFunc = () => { console.log(this._name) } RückkehrpfeilFunc }, _name: „obj“, } obj.func()() //obj func = obj.func func()() //undefiniert obj.func.bind({ _name: "newObj" })()() //newObj obj.func.bind()()() //undefiniert obj.func.bind({ _name: "bindObj" }).apply({ _name: "applyObj" })() //bindObj
Verwenden Sie die Funktionen apply, call und bind, um die Richtung zu ändern this.
Der Unterschied zwischen
thisArg , [ argsArray]
call(thisArg, arg1, arg2, ...)
liegt in den Parametern, die danach übergeben werden in apply ist ein Array, und was in call übergeben wird, ist der erweiterte Parameter
bind(thisArg[, arg1[, arg2[, ...]]])()
this
wird als bind()
bezeichnet. Der erste Parameter wird als Parameter der neuen Funktion zur Verwendung beim Aufruf verwendet.Bitte korrigieren Sie mich! ! Vielen Dank an alle fürs Lesen!
Referenzmaterial
https://juejin.cn/post/6946021671656488991#comment
[Empfehlungen für verwandte Video-Tutorials: Web-Frontend]
Wie können Sie das Zeigeproblem von JS oben verstehen? Schauen Sie sich die Details dieses Artikels an. Weitere Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!