Können Sie das Zeigeproblem von JavaScript verstehen? Der folgende Artikel wird mit Ihnen über dieses lästige Zeigeproblem sprechen. Ich hoffe, er wird Ihnen helfen!
In den verschiedenen Einführungen haben wir gesehen, wie man die Zeigemethoden von diesem bestimmen kann: „Dies zeigt letztendlich auf das Objekt, das es aufruft.“ Dieser Satz wird als Kern angesehen , Aber angesichts der unterschiedlichen Situationen neigen wir dazu, verwirrt zu sein. Basierend auf meinem Verständnis verschiedener Situationen habe ich einen Satz vorgeschlagen „Pfeile, Timing und Struktur, besondere Aufmerksamkeit in besonderen Situationen, normale Aufrufe, sich die Punktnummer anzusehen, die späteren Punkte nicht nach vorne zu schauen, und dann basierend auf der Beurteilung.“ nach dem nächstgelegenen Prinzip, und das letzte verbleibende Ding ist das Fenster „. [Verwandte Empfehlungen: Javascript-Lern-Tutorial]
Pfeilfunktion
Die Pfeilfunktion selbst hat dies nicht, daher gibt es diese Änderung nicht. Sie erfasst das Äußere mithilfe von
var name = "windowsName";
var a = {
name: "Cherry",
fn() {
setTimeout(()=>{
console.log(this.name);
},0)
}
}
a.fn() //CherryAnalyse: Zuerst Objekt a ruft die fn-Funktion auf, also zeigt diese der fn-Funktion auf Objekt a, und dann erfasst der Pfeil das äußere this, dann ist es nicht dieses in setTimeout, sondern dieses der fn-Funktion, also erhalten wir schließlich den Namen in Objekt a
timer
Für die Rückruffunktion innerhalb der Verzögerungsfunktion zeigt dies auf das globale Objektfenster
var name = "windowsName";
var a = {
name: "Cherry",
fn() {
setTimeout(function (){
console.log(this.name);
},0)
}
}
a.fn() //windowsNameAnalyse: Zuerst ruft Objekt a die fn-Funktion auf, und dann ist die Rückruffunktion in setTimeout hier eine anonyme Funktion , das ist eine gewöhnliche Funktion, dann ist dies eine anonyme Funktion, die auf das Fenster zeigt this in der anonymen Funktion zeigt auf window, aber verwenden Sie bind, um die anonyme Funktion zu ändern. This verweist auf Objekt b, sodass der Nachname im Objekt b
this im Konstruktor auf das erstellte Instanzobjekt verweist ,Hinweis: Wenn ein Objekt im Konstruktor zurückgegeben wird, wird es beim Erstellen nicht erstellt. Es wird ein neues Instanzobjekt geben, aber dieses zurückgegebene Objekt
var name = "windowsName";
var b={
name: "setTimeoutName"
}
var a = {
name: "Cherry",
fn() {
setTimeout((function (){
console.log(this.name);
}).bind(b),0)
}
}
a.fn() //setTimeoutNameAnalyse: Hier erstellen wir das Instanzobjekt a über den Konstruktor, was dem Öffnen eines neuen Ortes und dem Kopieren des Inhalts des Konstruktors entspricht. Zu diesem Zeitpunkt gibt es ein Objekt a. Das Ändern des Inhalts in Objekt a hat keine Auswirkungen auf den Konstruktor
Beurteilung der PunktzahlVerwenden Sie
., um den Punkt zu beurteilen und dem Prinzip der Nähe zu folgenfunction fn(){
this.age = 37;
}
var a = new fn();
console.log(a.age); // 37
a.age = 38;
console.log(fn); // { this.age = 37; }
console.log(a.age); // 38. vor der fn-Funktion, also ist das nächstgelegene Objekt b, also zeigt diese der fn-Funktion auf Objekt b, und das letzte, was sie erhält, ist das Alter von Objekt b var a = {
age:10,
b: {
age:12,
fn(){
console.log(this.age);
}
}
}
a.b.fn(); //12. vor und nach fn, unabhängig vom vorherigen .</code >. Schauen Sie sich einfach die Rückseite an, und dann ändert die letzte Bindung diesen Punkt in c, dann zeigt dieser Punkt der fn-Funktion auf Objekt c, und Sie erhalten das Alter von Objekt c<span style="font-size: 18px;"></span></strong></p>Übung<p><code>.判断this指向，遵循就近原则var a = {
age:10,
b: {
age:12,
fn(){
console.log(this.age); //undefined
}
}
}
var c = {
age:20,
}
var d = {
age:30,
}
a.b.fn.bind(c).bind(d)(); //20解析：对象a调用对象b的fn函数，fn函数前面有两个.，那么最近的是对象b，所以fn函数的this指向的就是对象b，最后拿到的就是对象b的age
function outerFunc() {
console.log(this) // { x: 1 }
function func() {
console.log(this) // Window
}
func()
}
outerFunc.bind({ x: 1 })()解析：对象a调用对象b的fn函数然后使用bind改变this的指向，这时候fn前后前后都有.，不看前面的.，只用看后面的，然后最近的bind改变this指向为c，那么此时fn函数的this指向的就是对象c，拿到的就是对象c的age
练习
obj = {
func() {
const arrowFunc = () => {
console.log(this._name)
}
return arrowFunc
},
_name: "obj",
}
obj.func()() //obj
func = obj.func
func()() //undefined
obj.func.bind({ _name: "newObj" })()() //newObj
obj.func.bind()()() //undefined
obj.func.bind({ _name: "bindObj" }).apply({ _name: "applyObj" })() //bindObj使用 apply、call、bind 函数可以改变this的指向，上面this的例子中使用到
区别
thisArg , [ argsArray] call(thisArg, arg1, arg2, ...)
apply和call函数区别在于this后面传入的参数，apply中传的是一个数组，而call中传入的是展开的参数
bind(thisArg[, arg1[, arg2[, ...]]])()
this 被指定为 bind()
apply, call, bind
Verwenden Sie die Funktionen apply, call, bind, um den Zeiger davon zu ändern. Im obigen Beispiel wird der Unterschied
thisArg, [ argsArray]call(thisArg, arg1, arg2, ...)Der Unterschied zwischen apply- und call-Funktionen liegt in den Parametern, die danach übergeben werden. Bei apply wird ein Array übergeben , während des Aufrufs werden die erweiterten Parameter übergeben
bind(thisArg[, arg1[, arg2[, ...]]])()
dies dieser neuen Funktion wird als erster Parameter von bind() angegeben, und die übrigen Parameter werden es tun als Parameter der neuen Funktion zur Verwendung beim Aufruf verwendet werdenDas obige ist der detaillierte Inhalt vonKönnen Sie das Zeigeproblem von JS verstehen? Schauen Sie sich diesen Artikel an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
