Ausführliche Erklärung dieses Schlüsselworts in JavaScript

1. Einleitung

Das Schlüsselwort this ist einer der komplexesten Mechanismen in JavaScript. Es handelt sich um ein ganz spezielles Schlüsselwort, das im Rahmen aller Funktionen automatisch definiert wird. Für JavaScript-Entwickler, die nicht die Zeit investiert haben, diesen Mechanismus zu erlernen, war diese Bindung immer eine sehr verwirrende Sache.

2. Verstehen Sie dies

Der erste Schritt zum Verständnis besteht darin, zu verstehen, dass sich dies weder auf die Funktion selbst noch auf den lexikalischen Gültigkeitsbereich der Funktion bezieht. Solche Erklärungen haben Sie vielleicht in die Irre geführt, aber tatsächlich sind sie alle falsch. Der Wert ändert sich je nachdem, wo die Funktion verwendet wird. Es gilt jedoch immer das Prinzip, dass this in JS das Thema der aktuellen Verhaltensausführung darstellt. In JS wird this hauptsächlich in der Funktion untersucht, aber das bedeutet nicht, dass this nur in der Funktion existiert. Dies ist tatsächlich eine Bindung, die auftritt, wenn die Funktion aufgerufen wird. Worauf es zeigt, hängt ganz davon ab, wo die Funktion aufgerufen wird. Wie kann man das unterscheiden?

3. Wer ist das?

Dies hängt von der Situation ab. Es gibt fünf häufige Situationen:

1. Wenn eine Funktion ausgeführt wird, prüfen Sie zunächst, ob vor dem Funktionsnamen ein "." steht. Wenn ja, ist die Person vor dem "." diese Person; wenn nicht, ist dies das Fenster

Funktion fn(){
 konsole.log(dies);
}
var obj={fn:fn};
fn();//dieses->Fenster
obj.fn();//dieses->obj
Funktion Summe(){
 fn();//dieses->Fenster
}
Summe();
var oo = {
 Summe:Funktion(){
 console.log(dies);//dies->oo
 fn(); //dieses->Fenster
 }
};
oo.sum();

2. Dies ist in einer selbstausführenden Funktion immer Fenster

(Funktion(){ //dieses->Fenster })();
 ~function(){ //dieses->Fenster }();

3. Binden Sie eine Methode an ein Ereignis eines Elements. Wenn das Ereignis ausgelöst wird, führen Sie die entsprechende Methode aus. Das „this“ in der Methode ist das aktuelle Element, mit Ausnahme von IE6 bis 8, das „attachEvent“ verwendet (ein bekannter Fehler im IE).

DOM-Ereignisbindung auf Nullebene

oDiv.onclick=Funktion(){
 //dieses->oDiv
 };

DOM-Sekundärereignisbindung

oDiv.addEventListener("klicken",Funktion(){
 //dieses->oDiv
 },FALSCH);

Bei Verwendung von attachEvent in IE6~8 bezieht sich this standardmäßig auf das Fensterobjekt

oDiv.attachEvent("klicken",Funktion(){
 //dieses->Fenster
 });

Meistens stoßen wir auf Ereignisbindungen, wie im folgenden Beispiel. Für IE6 bis 8 müssen Sie die Verwendung von attachEvent nicht allzu ernst nehmen.

Funktion fn(){
 konsole.log(dies);
}
document.getElementById("div1").onclick=fn; //das in fn ist #div1
document.getElementById("div1").onclick=function(){
console.log(dies);//dies->#div1
fn();//dieses->Fenster
};

4. Im Konstruktormodus ist das in this.xxx=xxx in der Klasse (Funktionskörper) vorkommende this eine Instanz der aktuellen Klasse

Funktion CreateJsPerson(Name,Alter){
//Das vom Browser standardmäßig erstellte Objekt ist unsere Instanz p1->this
dies.name=Name;//->p1.name=Name
dies.Alter=Alter;
dies.writeJs = Funktion() {
console.log("mein Name ist"+dieser.name +",ich kann Js schreiben");
 };
//Der Browser gibt standardmäßig die erstellte Instanz zurück}
var p1=new CreateJsPerson("Erstellen Sie eine neue Person", 48);

Dabei ist eines zu beachten: Bei einem Eigenschaftswert (Methode) einer Klasse muss bei der Ausführung der Methode geprüft werden, ob davor ein "." steht, um zu wissen, wer dies ist. Um zu verstehen, was es bedeutet, können Sie sich das folgende Beispiel ansehen.

Funktion Fn(){
dies.x = 100; //dies->f1
dies.getX=Funktion(){
console.log(this.x); //this->muss sehen, wann getX ausgeführt wird}
}
var f1=neue Fn;
f1.getX(); //-> dies in der Methode ist f1, also f1.x=100
var ss=f1.getX;
ss(); //->dies in der Methode ist window->undefiniert

5.Anrufen, Anwenden und Binden

Schauen wir uns zunächst ein Problem an. Wie binden wir dies im folgenden Beispiel an obj?

var obj={name:"Boot in den Wellen"};
Funktion fn(){
console.log(dieses);//dieses=>Fenster
}
fn();
obj.fn(); //->Nicht abgefangener TypeError: obj.fn ist keine Funktion

Wenn Sie obj.fn() direkt binden, meldet das Programm einen Fehler. Hier sollten wir fn.call(obj) verwenden, um dieses Bindungsobjekt zu implementieren. Als Nächstes stellen wir die Aufrufmethode im Detail vor:

Die Funktion der Aufrufmethode:

①Zuerst führen wir die Aufrufmethode auf dem Prototyp aus. Bei der Ausführung der Aufrufmethode ändern wir this in der fn-Methode in den ersten Parameterwert obj; dann führen wir die fn-Funktion aus.

② Beim Aufruf können auch Werte übergeben werden. Die im strengen Modus und im nicht strengen Modus erhaltenen Werte sind unterschiedlich.

//Im nicht strengen Modus var obj={name:"浪里行舟"};
Funktion fn(num1,num2){
konsole.log(num1+num2);
konsole.log(dies);
}
fn.call(100,200);//dies->100 num1=200 num2=undefiniert
fn.call(obj,100,200);//dieses->obj num1=100 num2=200
fn.call();//dieses->Fenster
fn.call(null);//dieses->Fenster
fn.call (undefiniert);//dieses->Fenster

//fn.call() im strengen Modus; //this->undefined im strengen Modus
fn.call(null); // im strikten Modus this->null
fn.call(undefined); // im strikten Modus this->undefined

**Die Funktionen der Methoden apply und call sind genau gleich. Beide werden verwendet, um das Schlüsselwort this der Methode zu ändern und

Ausgeführt, und die Regeln für den Fall, dass der erste Parameter im strikten Modus und im nicht strikten Modus null/undefiniert ist

Das Gleiche gilt für das Gesetz. **

Der einzige Unterschied zwischen beiden besteht darin, dass call die Parameter einzeln an fn übergibt, während apply sie nicht einzeln übergibt, sondern die an fn zu übergebenden Parameterwerte für die Operation in ein Array einfügt. Es ist aber auch gleichbedeutend damit, den Parametern von fn einzeln Werte zuzuweisen. Zusammenfassend lässt sich sagen, dass der zweite Parameter des Aufrufs eine Parameterliste akzeptiert und der zweite Parameter von Apply ein Parameterarray akzeptiert.

fn.call(obj,100,200);
fn.apply(obj,[100,200]);

bind: Diese Methode ist nicht mit IE6-8 kompatibel. Sie ähnelt call/apply insofern, als sie zum Ändern des Schlüsselworts this verwendet wird, unterscheidet sich jedoch erheblich von den beiden:
fn.call(obj,1,2); //->Die Änderung und die Ausführung der fn-Funktion erfolgen zusammen

fn.bind(obj,1,2);//-> ändert dies einfach in fn in obj und übergibt zwei Parameterwerte 1 und 2 an fn.
 Aber zu diesem Zeitpunkt wird die fn-Funktion nicht ausgeführt var tempFn=fn.bind(obj,1,2);
tempFn(); //So wird die fn-Funktion ausgeführt

Bind verkörpert die Idee der Vorverarbeitung: Ändern Sie this von fn im Voraus in das gewünschte Ergebnis und bereiten Sie auch die entsprechenden Parameterwerte vor, damit wir sie direkt ausführen können, wenn wir sie in Zukunft benötigen.

Mit „Aufrufen“ und „Anwenden“ wird die Funktion direkt ausgeführt, während „Binden“ einen weiteren Aufruf erfordert.

var a = {
 Name: "Kirsche",
 fn : Funktion (a,b) {
 konsole.log( a + b )
 }
 }
 var b = a.fn;
 b.binden(a,1,2)

Der obige Code wird nicht ausgeführt. Bind gibt eine Funktion zurück, die den Kontext ändert. Wir müssen sie manuell aufrufen:

b.binden(a,1,2)() //3

Eines muss jedoch festgehalten werden: Beim Auftreten der fünften Situation (Aufruf „Apply“ und „Bind“) weichen die ersten vier Situationen alle.

4. Pfeilfunktion zeigt auf

Die Pfeilfunktion ist eine neue Syntax zum Definieren von Funktionen mithilfe eines „Pfeils“ (=>), wie der Name schon sagt, sie ist herkömmlichen Funktionen jedoch in zweierlei Hinsicht überlegen: Sie ist kürzer und bindet diesen nicht.

var obj = {
 Geburt: 1990,
 getAge: Funktion () {
 var b = diese.Geburt; // 1990
 var fn = Funktion () {
 return new Date().getFullYear() - this.birth; // dies bezieht sich auf Fenster oder undefiniert
 };
 gibt fn( zurück);
 }
};

Nun legt die Pfeilfunktion die Richtung von this vollständig fest. Die Pfeilfunktion hat kein eigenes this. Das this der Pfeilfunktion wird nicht beim Aufruf festgelegt, sondern das Objekt, in dem sie definiert wird, ist ihr this.

Mit anderen Worten, das This der Pfeilfunktion hängt davon ab, ob in der äußeren Schicht eine Funktion vorhanden ist. Wenn ja, ist das This der äußeren Funktion das This der inneren Pfeilfunktion. Wenn nicht, ist dies das Fenster.

<button id="btn1">Pfeilfunktion this_1 testen</button>
 <button id="btn2">Pfeilfunktion this_2 testen</button>
 <Skripttyp="text/javascript"> 
 let btn1 = document.getElementById('btn1');
 lass obj = {
 Name: 'kobe',
 Alter: 39,
 getName: Funktion () {
 btn1.onclick = () => {
 console.log(dies);//Objekt
 };
 }
 };
 obj.getName();
 </Skript>

Da die Pfeilfunktion im obigen Beispiel kein eigenes „this“ erstellt, erbt sie „this“ nur von der vorherigen Ebene ihrer Bereichskette. Tatsächlich kann es mit dem folgenden Code vereinfacht werden:

let btn1 = document.getElementById('btn1');
 lass obj = {
 Name: 'kobe',
 Alter: 39,
 getName: Funktion () {
 console.log(dies)
 }
 };
 obj.getName();

Was ist, wenn in der vorherigen Ebene keine Funktion vorhanden ist? Auf wen verweist dies?

<button id="btn1">Pfeilfunktion this_1 testen</button>
 <button id="btn2">Pfeilfunktion this_2 testen</button>
 <Skripttyp="text/javascript"> 
 let btn2 = document.getElementById('btn2');
 lass obj = {
 Name: 'kobe',
 Alter: 39,
 getName: () => {
 btn2.onclick = () => {
 console.log(dieses);//Fenster
 };
 }
 };
 obj.getName();
 </Skript>

Obwohl im obigen Beispiel zwei Pfeilfunktionen vorhanden sind, hängt dies tatsächlich von der äußersten Pfeilfunktion ab. Da obj ein Objekt und keine Funktion ist, verweist dies auf das Window-Objekt.

Da dies in der Pfeilfunktion entsprechend dem lexikalischen Gültigkeitsbereich gebunden ist, kann dies beim Aufruf der Pfeilfunktion mit call() oder apply() nicht gebunden werden, d. h. der erste übergebene Parameter wird ignoriert:

var obj = {
 Geburt: 1990,
 getAge: Funktion (Jahr) {
 var b = diese.Geburt; // 1990
 var fn = (y) => y - this.birth; // this.birth ist immer noch 1990
 return fn.call({Geburt:2000}, Jahr);
 }
};
obj.getAge(2018); // 28

Weiterführende Literatur

Pfeilfunktion - Liao Xuefeng

Pfeilfunktionen und dies in JS

dies, anwenden, anrufen, binden

Zusammenfassen

Dies ist das Ende dieses Artikels mit der ausführlichen Erklärung des JavaScript-Schlüsselworts this. Weitere relevante Inhalte zu diesem JavaScript-Schlüsselwort finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!