Beispiel-Tutorial zur Verwendung von This in Javascript

Ich habe das Buch „JavaScript You Don't Know“ mehrmals gelesen. Es scheint, dass ich jedes Mal, wenn ich es lese, neue Entdeckungen mache. Einige Inhalte kann ich nicht sofort verstehen, aber ich scheine einige Konzepte zu verstehen jedes Mal, wenn ich es lese.
Lesen Sie das thisSchlüsselwort noch einmal. Das Konzept ist sehr flexibel und sehr schwer zu verstehen, daher sehe ich keinen Schaden darin, es oft zu lesen. Ich hoffe, dass JavaScript auf der Welt beliebt wird und die Lernkosten niedrig sind!
Siehe Kapitel 1 und Kapitel 2 des zweiten Teils dieses Buches.

Dieses Schlüsselwort ist einer der komplexesten Mechanismen in js. Es wird im Rahmen aller Funktionen automatisch definiert.

Es scheint, dass ich beim Erlernen dieses Schlüsselworts auch einen langen Umweg gemacht habe. Sie müssen mich fragen, warum ich einen langen Umweg gemacht habe. Der entscheidende Punkt ist, dass ich die Kernkonzepte immer noch nicht gründlich gelernt und verstanden habe. Das unterscheidet sich nicht von Grundschülern, die neues Wissen erlernen. Wenn Sie das Schlüsselwort „this“ beherrschen wollen, müssen Sie sich an die Schlüsselkonzepte halten und dürfen sich nicht vorstellen, worum es geht.

Schlüsselkonzept: Wenn eine Funktion in js aufgerufen wird, ist sie definitiv an ein Objekt gebunden. Bei der Analyse des Schlüsselworts this müssen Sie wissen, um welches Objekt es sich handelt, wenn die Funktion aufgerufen wird. .
Denken Sie daran: Es gibt keine Beziehung zwischen dem Aufruf und der Definition einer Funktion in js. Das an die Funktion gebundene Objekt ist erst bekannt, wenn es aufgerufen wird.

Die Unsicherheit dieses Schlüsselworts ist ein zweischneidiges Schwert. Die Verwendung von Funktionen in js ist sehr flexibel die Funktion. Zweitens verursachte dies auch einige Probleme beim Lernen. Beim Lernen müssen Sie also zunächst die Vorteile dieses Schlüsselworts verstehen und dann zu den Stellen gehen, die Probleme verursachen

Schauen Sie sich zuerst den ersten Code an
Seite 75

//注意只是定义了一个函数，并未调用，这时候函数是没有绑定任何对象function identify() {return this.name.toUpperCase();
}//同上面的函数,但是这个函数内部有点复杂，如果下面的代码看不懂//可以只看上面的函数function speak() {var greeting = "Hello, I'm " + identify.call( this );console.log( greeting );
}var me = { //定义了一个字面量对象
    name: "Kyle"
};var you = {//定义了一个字面量对象
    name: "Reader"
};//通过call方式把函数identify分别绑定到两个对象上//这时的this是指向me对象，和you对象
identify.call( me ); // KYLE  
identify.call( you ); // READER//通过call方式把函数call分别绑定到两个对象上//这时的this是指向me对象，和you对象
speak.call( me ); // Hello, I'm KYLE
speak.call( you ); // Hello, I'm READER

Beim Definieren einer Funktion in JavaScript gehört die Funktion zu keinem Objekt. Das ist sehr kritisch, sehr kritisch, sehr kritisch. Dies ist das erste Hindernis für das Verständnis dieses Schlüsselworts.

Die Unsicherheit dieses Schlüsselworts beim Definieren von JS-Funktionen macht die Verwendung von JS-Funktionen äußerst flexibel und jedes Objekt kann es verwenden.

Was genau ist das?

Die Bindung davon hat nichts mit dem Speicherort der Funktionsdefinition zu tun, sondern nur 取决于函数调用的方式.
Wenn eine Funktion in JavaScript aufgerufen wird, wird ein Aktivitätsdatensatz (manchmal auch Kontext genannt) erstellt erstellt. Dieser Datensatz enthält den Ort, an dem die Funktion aufgerufen wurde, die aufrufende Methode der Funktion und die übergebenen Parameter. Dies ist ein Attribut im Datensatz.

Auf diese Weise können Sie Javascript-Schlüsselwörter lernen首要问题是要解决怎么知道到函数的调用位置.

js-Objektbindungsregeln

Jede js-Funktion muss beim Aufruf ein Objekt finden, 绑定 Kann erst später verwendet werden. Dies ist das größte Konzept, das Sie beherrschen müssen, nachdem Sie den Unterschied zwischen der Definition und dem Aufruf von js-Funktionen verstanden haben. Persönlich ist die Bindung von Regeln nicht schwierig Die Methode ist äußerst verwirrend. 难点还是在js的函数作用域的理解默认绑定Standardbindung

Dies ist ein unabhängiger Aufruf der Funktion. Das heißt, wenn eine Funktion direkt aufgerufen wird, scheint sie nicht an das Objekt gebunden zu sein Einführung: In js müssen Funktionsaufrufe an ein Objekt gebunden sein.

Schauen Sie sich die folgende Codeseite 83 an

  function foo() { //这是函数的定义位置console.log( this.a );
}  var a = 2;//这个变量定义的含义是什么呢？仅仅是赋值给a吗？

  foo(); // 2  //这是函数的调用位置。为什么会打印出2呢？

Viele Funktionen werden so aufgerufen, dass sie eine Katze oder einen Tiger imitieren, aber es ist anders, wenn Sie das Spezifische verstehen Bedeutung.

Die Funktion foo ist im globalen Gültigkeitsbereich (Fensterbereich) definiert. Zufälligerweise erfolgt ihr Aufruf auch im globalen Gültigkeitsbereich. Warum wird also der Wert der Variablen a ausgegeben, wenn foo() aufgerufen wird? Obwohl das Schlüsselwort var verwendet wird, können wir aus der Bereichsanalyse erkennen, dass die Variable a tatsächlich eine globale Variable ist. Um es klarer auszudrücken: a ist tatsächlich ein Attribut des globalen Objektfensters und 2 ist der Attributwert dieses Attributs .

Wenn foo() aufgerufen wird, ist es nur die Funktion selbst ohne jegliche Modifikatoren. Zu diesem Zeitpunkt hat sie keinen Funktionswrapper und befindet sich im globalen Gültigkeitsbereich, also ist dies in foo(. ) zeigt auf Wenn Sie bei globalen Objekten this.a drucken möchten, suchen Sie nach dem Aufrufort von foo() und Sie finden den globalen Bereich. Wenn Sie nach dem Attribut this.a des globalen Bereichs suchen, wird gedruckt den Attributwert 2 aus.

Wenn wir die Funktionen setTimeout und setInterval verwenden, sind diese beiden Funktionen tatsächlich nackt und auch an das Fensterobjekt gebunden.

Implizite Bindung

Modifikatoren werden der Funktion hinzugefügt, wenn sie aufgerufen wird. Schauen Sie sich den Code unten an

Seite 85

Dies ist die häufigste Methode. Wenn Sie das vorherige Objekt nicht schreiben, wird es dann die Standardbindung oben sein?

  function foo() { //定义在全局作用下的函数，仅仅是定义，不是调用位置console.log( this.a );
}var obj = { //定义一个对象
    a: 2,foo: foo
};

obj.foo(); // 2  给foo()函数找了一个对象，this就指向这个对象了

Sie sehen oft den Satz am Anfang der äußeren Funktion in der verschachtelten Rückruffunktion von js-Code 隐式丢失

Vielleicht haben Sie ihn bereits verwendet, aber Sie Verstehe es. Es wird einfacher sein, die Bedeutung zu verwenden

   var  that=this; //这是什么含义

看下面段代码.这段代码其实以前我也不太理解，问题还是没有彻底领悟js函数定义和调用之间是没有关系的这一点。
page 86

function foo() { //定义了一个函数console.log( this.a );
}var obj = { //定义了一个对象字面量
    a: 2,foo: foo  //函数作为对对象的属性
};var bar = obj.foo; //把obj对象的函数foo属性赋值给bar变量//这里就是理解这个问题的关键，如果你现在认为调用bar()的时候绑定的对象//是obj那就完全搞错了。这个时候仅仅是把函数foo赋值给了var变量，//并没有把对象也给bar变量，因为这里还不是foo()函数的调用位置，现在//foo函数还没有绑定对象，那么调用bar()的时候对象到底是谁？不知道。//调用的时候才知道。var a = "oops, global"; // 任然是全局对象的属性
bar(); // "oops, global" 这里执行的是默认绑定，this就是去全局对象啦

下面这段代码就是使用var that=this的场景
在使用回调函数的时候要留心。js中函数是一等对象，可以作为另一个函数的参数传入函数。 问题就出在这里了，函数一旦作为实参代替形参的时候，实际也执行了和上面代码一样的赋值过程，实际只是传递了函数本身，原先的对象就没有了。

page 86

function foo() { //定义一个函数console.log( this.a );
}function doFoo(fn) { //fn是形参// 如果函数作为实参传入相当于代码 var fn=obj.foo//和上面一段代码是完全一样的，只是函数本身，并没有绑定任何对象

    fn(); // 在这里调用的时候，由于fn只代表foo()函数，被绑定到全局对象上了
}var obj = {a: 2,foo: foo
};var a = "oops, global"; // `a` also property on global object

doFoo( obj.foo ); // "oops, global"不要被obj.foo迷惑了//没有实际执行函数的调用，此时obj.foo仅仅代表没有绑定任何对象的函数//这个代码块看着眼熟么？这就是javascript中回调函数的样子，当//一个函数作为参数传递进另一个函数的时候,这个参数函数就找不到自己绑定的对象是谁了，//所以就默认绑定到全局对象上了。但是我们既然在一个函数里调用另一个函数，肯定是要用这个函数操作当前的对象，那么既然找不到了，我们就手动给他指定一个对象吧。这就是为什么要使用//var  that=this的原因。我觉得理解这个概念，js的功力至少会增加5%

Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial zur Verwendung von This in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!