Zusammenfassung und Praxis des Javascript-Prototyp-Kettendiagramms

Prototypenkette

Das Schlüsselwort „class“ wurde in ES6 eingeführt, aber JS basiert immer noch auf Prototypen und „class“ ist eigentlich syntaktischer Zucker.

Beispielsweise gibt es eine Personenklasse:

Klasse Leute {
  Konstruktor(Requisiten) {
    dieser.name = Requisiten.name;
  }
  laufen() {
    console.log('ausführen')
  }
}

Durch die neue Personenklasse werden viele Personen generiert, wie beispielsweise Zhang San und Li Si:

let lisi = neue Personen('Personen')

Doch inmitten dieser riesigen Menschenmenge gibt es eine Gruppe von Menschen mit außergewöhnlichen Talenten. Sie werden Superhelden genannt.

Klasse Hero erweitert Leute {
   Konstruktor(Requisiten) {
    super(Requisiten);
    diese.Leistung = Eigenschaften.Leistung
   }
   heyHa() {
       Alarm (diese.Leistung)
   }
}

Die Klasse Hero erbt People, daher ist der Hero zunächst ein Individuum mit einer Run-Methode und verfügt dann über eine Superkraft-HeyHa-Methode, die normale Menschen nicht haben. Wir können einen Helden namens Jinx definieren, der die Superkraft einer Kanone besitzt:

let Jinx = neuer Held({ Name: 'jinx', Macht: 'Kanone!' })

Obwohl die Instanz Jinx keine Run-Methode definiert, kann mithilfe der Prototypenkette ermittelt werden, dass der People-Prototyp diese Run-Methode hat, d. h. sein impliziter Prototyp __proto__ verweist auf den Prototyp des Konstruktors.

Wenn eine Instanz auf eine Methode oder Eigenschaft zugreift, beginnt sie bei sich selbst und sucht dann zurück in der Prototypenkette.

Jinx.heyHa() // Kanone!
// Wenn es diese Methode hat Jinx.run = () => console.log('i just fly!')
Jinx.run() // ich fliege einfach!

Also, worauf verweist People.prototype.__proto__ ? Object.prototype , geben Sie den Code in die Konsole ein und Sie sehen:

Aber __prototype__ von Object.prototype ist gleich null und das Ende des Universums ist das Nichts. .

Bisher sieht das vollständige Kettendiagramm des Prototyps wie folgt aus:

Wir können eine einfache JQuery-Bibliothek basierend auf der Prototypenkette implementieren

Klasse JQuery {
  Konstruktor(Selektor, Knotenliste) {
    const res = nodeList || document.querySelectorAll(Selektor);
    Konstante Länge = Res.Länge;
    für (sei i = 0; i < Länge; i++) {
      dies[i] = res[i]
    }
    diese.Länge = Länge;
    dieser.Selektor = Selektor;
  }
  Gleichung (Index) {
    gibt neues JQuery zurück (undefiniert, [dieser[Index]]);
  }
  jedes(fn) {
    für(lass i = 0; i < diese.Länge; i++) {
      const ele = dies[i]
      fn(Element)
    }
    gib dies zurück;
  }
  ein(Typ, fn) {
    gib dies zurück.jedes(ele => {
      ele.addEventListener(Typ, Funktion, falsch)
    })
  }
  // Andere DOM-APIs erweitern
}
const $$ = (Selektor) => neues JQuery(Selektor);
$$('body').eq(0).on('click', () => alert('click'));

Führen Sie es in der Konsole aus und das Ergebnis ist wie folgt:

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!