Warum gibt es das in JS?

1. Nachfrage

Angenommen, wir haben ein Objekt

var Person = {
    Name: 'Frank',
    Alter: 18,
    Telefon: '13812345678',
    sagHallo: function(){
      //Muss ergänzt werden},
    sagTschüs: function(){
      //Muss ergänzt werden}
}

Dieses person hat name und age sowie eine sayHi Methode. Die aktuelle Anforderung lautet:

Rufen Sie person.sayHi(...) auf, um „Hallo, ich bin Frank , 18 Jahre alt.“ auszudrucken.
Rufen Sie person.sayBuy(...) an und drucken Sie „Auf Wiedersehen, denken Sie daran, mein Name ist Frank , wenn Sie einen Termin vereinbaren möchten, rufen Sie mich an, meine Telefonnummer ist 13812345678“
brauchen

So einfach ist die Anfrage. Indem wir diese Anforderung erfüllen, können wir this Wesentliche verstehen.

2. Lösung

var Person = {
    ...
    sagHallo: Funktion(Name, Alter){
      console.log('Hallo, mein Name ist ${name}, ich bin ${age} Jahre alt')
    },
    sagTschüs: Funktion(Name, Telefon){
      console.log('Auf Wiedersehen, denken Sie daran, mein Name ist ${name}. Wenn Sie einen Termin mit mir vereinbaren möchten, rufen Sie mich an, meine Telefonnummer ist ${phone}.')
    }
}

Die aufrufende Methode ist

person.sayHi(person.name, person.alter)
person.sayBye(person.name, person.telefon)

Keine Sorge, ich weiß, dieser Code ist dumm, ich werde ihn als nächstes verbessern.

3. Die erste Verbesserung

Bei der obigen Methode müssen Sie bei jedem Aufruf person.name als Parameter auswählen, was wirklich dumm ist. Es ist besser, direkt eine person zu übergeben. Der Code lautet wie folgt:

var Person = {
    ...
    sagHallo: Funktion(selbst){
      console.log('Hallo, ich bin ${self.name}, ${self.age} Jahre alt')
    },
    sagTschüs: function(self){
      console.log('Auf Wiedersehen, denken Sie daran, mein Name ist ${self.name}. Wenn Sie einen Termin mit mir vereinbaren möchten, rufen Sie mich an, meine Telefonnummer ist ${self.phone}')
    }
}

Die aufrufende Methode ist

person.sayHi(Person)
person.sayBye(Person)

Das ist etwas besser, aber der Code ist immer noch albern.
Warum können wir person im Parameter nicht weglassen und ihn einfach in person.sayHi() ändern?

4. Zucker hinzufügen

Die von Entwicklern am häufigsten gewünschte aufrufende Methode ist person.sayHi() ， Die Frage ist also: Wenn person.sayHi() keine tatsächlichen Parameter hat, wie empfängt person.sayHi dann person ?

• Methode 1: Behandeln Sie den ersten Parameter self weiterhin als person , sodass der formale Parameter immer ein self mehr hat als der tatsächliche Parameter
• Methode 2: Verstecke self und verwende dann das Schlüsselwort this , um auf self zuzugreifen.
  

Der Vater von JS wählte Methode 2 und verwendete this für den Zugriff self . Der Entwickler von Python hat sich für Methode 1 entschieden und self als ersten Parameter belassen.

Der Ablauf ist wie folgt:

// Bevor Sie dies verwenden:
sagHallo: Funktion(selbst){
    console.log('Hallo, ich bin ${self.name}, ${self.age} Jahre alt')
}
// Nach der Verwendung von:
sagHallo: function(){
    // das ist selbst
    console.log('Hallo, ich bin ${this.name}, ${this.age} Jahre alt')
}

5. Unverständlich

Nach der Verwendung lautet der vollständige Code wie folgt:

var Person = {
    Name: 'Frank',
    Alter: 18,
    Telefon: '13812345678',
    sagHallo: function(){
      console.log('Hallo, ich bin ${this.name}, ${this.age} Jahre alt')
    },
    sagTschüs: function(){
      console.log('Auf Wiedersehen, denken Sie daran, mein Name ist ${this.name}. Wenn Sie einen Termin mit mir vereinbaren möchten, rufen Sie mich an, meine Telefonnummer ist ${this.phone}')
    }
}

Jetzt ist der Neuling an der Reihe, verwirrt zu sein. Was in aller Welt ist this ? Woher kam es?

上ist dies der versteckte erste Parameter. Wenn Sie person.sayHi() aufrufen, „wird“ die person this .

6. Probleme

Viele JS-Experten lehnen this Verwendung ab, da sie der Meinung sind, dass dies nicht einfach genug ist. Daher hat der Vater von JS call zuckerfreie .call-Methode für Experten vorbereitet.

person.sayHi.call(person) ist gleichwertig mit person.sayHi()

Das erste Argument von .call ist explizit person , ohne jegliche Syntaxvereinfachung.

Daher verwenden Experten normalerweise obj.fn.call(null,1,2,3) um this manuell zu deaktivieren.

Auf diese Weise kann der Parameter von person.sayHi.call tatsächlich jedes beliebige Objekt sein.

Das bedeutet, dass person.sayHi zwar eine Methode von person ist, aber für jedes Objekt aufgerufen werden kann.

7. Objekte und Funktionen

JS hat keine Klassen oder Methoden, nur Objekte und Funktionen.

Nachdem JS das Schlüsselwort class hinzugefügt hatte, wurde praktisch eine Fake-Klasse erstellt.

this ist die Brücke zwischen Objekten und Funktionen.

Im Vergleich zu JS bevorzuge ich die Methode von Python , bei der nicht das Schlüsselwort this verwendet wird, sondern der Parameter self , der leichter zu verstehen ist.

Dies ist das Ende dieses Artikels darüber, warum dies in JS vorhanden ist. Weitere Informationen dazu, warum dies in JS vorhanden ist, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!