Details zum JavaScript-Prototyp

1. Übersicht

1.1 Was ist ein Prototyp?

In JavaScript ist eine Funktion ein Objekt vom Typ Function , das Eigenschaften und Methoden enthält. Der Prototyp ist eine Eigenschaft des Objekts vom Typ Funktion.

Die Prototype-Eigenschaft ist in der Funktionsdefinition enthalten und ihr Anfangswert ist ein leeres Objekt. In JavaScript ist für Funktionen kein primitiver Typ definiert, der Prototyp kann also ein beliebiger Typ sein.

Der Prototyp wird verwendet, um die gemeinsam genutzten Eigenschaften und Methoden des Objekts zu speichern. Die Eigenschaften und Methoden des Prototyps wirken sich nicht auf die Eigenschaften und Methoden der Funktion selbst aus.

Die Beispielcodeüberprüfung erfolgt wie folgt:

Funktion Spaß() {
  console.log('Funktionsprototyp')
}
konsole.log(spaß.prototyp) // {}

fun.prototype gibt ebenfalls ein leeres Objekt zurück, was aber nicht bedeutet, dass Object.prototype keine Eigenschaften oder Methoden enthält. Diese Eigenschaften und Methoden sind nicht aufzählbar. Der Beispielcode lautet wie folgt:

Funktion Spaß() {
  console.log('Funktionsprototyp')
}

konsole.log(spaß.prototyp) // {}
// Alle Eigenschaften über Object.getOwnPropertyNames() abrufen console.log(Object.getOwnPropertyNames(fun.prototype)) // [ 'constructor' ]

Unter ihnen zeigt das Konstruktorattribut auf die Referenz des Konstruktors. Der Code lautet wie folgt:

// Konstruktor-Eigenschaft console.log(fun.prototype.constructor) // [Funktion: fun]

Konsole.log(Spaß.Prototyp.Konstruktor === Spaß) // wahr

1.2 Holen Sie sich den Prototyp

Nachdem wir das Konzept und die Funktion des Prototyps verstanden haben, müssen wir den Prototypen erhalten, bevor wir ihn betreiben können. Es gibt zwei Möglichkeiten, den Prototyp in JavaScript zu erhalten, wie unten gezeigt:

Durch prototype Eigenschaft des Konstruktors.

Durch Object.getPrototypeOf(obj) .

Der Unterschied zwischen beiden besteht darin, dass die Prototypeigenschaft des Konstruktors im Allgemeinen nur in Verbindung mit dem Konstruktor verwendet wird, während die Methode Object.getPrototypeOf(obj) im Allgemeinen eine Methode zum Abrufen des Prototyps des vom Konstruktor instanziierten Objekts ist.

Der Beispielcode lautet wie folgt:

// Konstruktorfunktion Person(Name) {
  dieser.name = Name
}

//Zeigt auf den Prototyp des Konstruktors var p1 = Person.prototype

var person = neue Person('Yiwan Zhou')

// Auf den Prototyp des Konstruktors zeigend var p2 = Object.getPrototypeOf(person)

konsole.log(p1 === p2) // wahr

Nachdem Sie den Prototyp erhalten haben, können Sie ihn wie ein Objekt bedienen, da der Prototyp selbst ein Objekt ist.

2. Prototyp-Eigenschaften

In JavaScript ist eine Funktion selbst auch ein Objekt, das Methoden und Eigenschaften enthält. Als nächstes lernen wir eine weitere Eigenschaft des Funktionsobjekts kennen – den Prototyp. Der Anfangswert dieser Eigenschaft ist ein leeres Objekt.

2.1 Verwenden Sie Prototypen, um Eigenschaften und Methoden hinzuzufügen.

Eine andere Möglichkeit, einem Objekt Eigenschaften und Methoden hinzuzufügen, besteht darin, sie über seinen Prototyp hinzuzufügen. Wenn Sie einem Konstruktor Prototypeigenschaften und Prototypmethoden hinzufügen, teilen sich alle vom Konstruktor neu erstellten Objekte die Eigenschaften und Methoden.

PS: Bei den sogenannten Prototyp-Eigenschaften bzw. Prototyp-Methoden handelt es sich um durch den Prototyp hinzugefügte Eigenschaften bzw. Methoden.

Es gibt mehrere Möglichkeiten, Eigenschaften und Methoden hinzuzufügen:

Fügen Sie ihm direkt Attribute oder Methoden hinzu

Fügen Sie Eigenschaften oder Methoden über Object.defineProperty() hinzu. Diese Methode ist sicherer als die erste Methode.

Fügen Sie Objekte direkt zum Prototyp hinzu.

Der Beispielcode lautet wie folgt:

//Konstruktorfunktion Fun() {}
//Eigenschaften und Methoden direkt zum Konstruktor hinzufügen Fun.prototype.str = 'Dies ist ein String'
Fun.prototype.fn = Funktion () {
  console.log('Dies ist eine Methode')
}
//Eigenschaften oder Methoden über defineProperty hinzufügen Object.defineProperty(Fun.prototype, 'MyFun', {
  Wert: Funktion () {
    console.log('das ist MyFun')
  },
})
//Testkonsole.log(Fun.prototype.str)
Spaß.prototype.fn()
Spaß.prototype.MeinSpaß()
var Spaß = neuer Spaß()
Spaß.MeinSpaß()
//Definieren Sie direkt ein Objekt, um den vorherigen Prototyp abzudecken. Fun.prototype = {
  Name: 'Eine Schale Zhou',
  Spaß: Funktion () {
    console.log('das ist eine Funktion')
  },
}
Spaß.prototype.spaß()
var Spaß = neuer Spaß()
spaß.spaß()

2.2 Zugriff auf Prototypeigenschaften und Prototypmethoden

Das Wichtigste an einem Prototyp ist seine Echtzeitnatur. Da fast alle Objekte in JavaScript per Referenz übergeben werden, verfügt nicht jede neue Objektentität, die wir erstellen, über eine eigene Kopie des Prototyps. Dies bedeutet, dass wir prototype Prototypeigenschaft jederzeit ändern und sich gleichzeitig auch die Prototypeigenschaft aller vom selben Konstruktor erstellten Objekte ändert, einschließlich der Eigenschaften und Methoden, die wir durch den Konstruktor erstellt haben.

Unter Verwendung des obigen Codes fügen wir dem Prototyp eine neue Methode hinzu und rufen sie auf. Der Beispielcode lautet wie folgt:

Fun.prototype.fn = Funktion () {
  console.log('Dies ist eine Methode')
}
fun.fn() //Dies ist eine Methode

Die Objekte, die wir zuvor erstellt haben, können auf die neu hinzugefügten Prototypeigenschaften und Prototypmethoden zugreifen.

3. Eigene Eigenschaften und Prototypeneigenschaften

Lassen Sie uns zunächst einen Konstruktor erstellen und ihm zwei Prototypeigenschaften hinzufügen.

//Konstruktorfunktion Fun() {}
//Prototypeigenschaften und -methoden hinzufügen Fun.prototype.name = 'eine Schüssel Haferbrei'
Fun.prototype.print = Funktion () {
  console.log('das ist eine Funktion')
}

Erstellen Sie ein Objekt über den Konstruktor und legen Sie seine Eigenschaften und Methoden fest

//Erstelle ein Objekt durch den Konstruktor var fun = new Fun()
// Dem Objekt Eigenschaften und Methoden hinzufügen fun.name = 'Yiwan Zhou'
Spaß.SayMe = Funktion () {
  console.log('das ist SayMe')
}

Jetzt hat unser fun Objekt zwei eigene Eigenschaften/Methoden und zwei Prototyp-Eigenschaften/Methoden. Auf diese Eigenschaften und Methoden greifen wir der Reihe nach zu.

//Zugriff auf Eigenschaften und Methoden console.log(fun.name) // Yiwan Zhou fun.SayMe() // das ist SayMe
fun.print() // dies ist eine Funktion

Wenn wir auf die name zugreifen, durchläuft die JavaScript-Engine alle Eigenschaften des Fun-Objekts und gibt den Wert der Namenseigenschaft zurück. Dasselbe gilt für die SayMe()-Methode. Wenn es jedoch um die Methode print() geht, durchläuft JavaScript Engine weiterhin alle Eigenschaften des Objekts. Zu diesem Zeitpunkt findet sie keine Methode print(). Als Nächstes greift JavaScript Engine auf den Prototyp der Konstruktorfunktion zu, die das aktuelle Objekt erstellt hat, also unseren Fun.prototype . Wenn eine solche Eigenschaft vorhanden ist, wird sie sofort zurückgegeben, andernfalls wird undefined zurückgegeben oder eine Ausnahme ausgelöst.

Fazit: Wenn eigene Eigenschaften vorhanden sind, greifen Sie vorrangig auf die eigenen Eigenschaften zu und erst dann auf die Prototyp-Eigenschaften.

3.1 Erkennen eigener Eigenschaften oder Prototyp-Eigenschaften

Jetzt kennen wir die Konzepte und Verwendungen von eigenen Eigenschaften und Prototyp-Eigenschaften. Aber woher wissen wir, ob eine Eigenschaft eine freie oder eine ursprüngliche Eigenschaft ist? JavaScript bietet die folgenden zwei Möglichkeiten, den Status einer Eigenschaft zu erkennen.

Verwenden Sie Object.prototype.hasOwnProperty(prop) um festzustellen, ob die Prop-Eigenschaft eine freie Eigenschaft ist. Diese Methode gibt einen Booleschen Wert zurück. Wenn es sich um eine eigene Eigenschaft handelt, gibt sie „true“ zurück, andernfalls „false“.

Verwenden Sie das Schlüsselwort „in“, um festzustellen, ob das Objekt und die Prototypkette über die angegebene Eigenschaft verfügen.

Der Testcode lautet wie folgt:

// Verwenden Sie die Methode Object.prototype.hasOwnProperty(prop), um zu überprüfen, ob es sich um eine eigene Eigenschaft handelt. console.log(fun.hasOwnProperty('name')) // true
console.log(fun.hasOwnProperty('print')) // falsch
// Wenn ein nicht vorhandenes Attribut erkannt wird, ist das Ergebnis ebenfalls falsch
console.log(fun.hasOwnProperty('SayMe')) // wahr

// über den Operator console.log('name' in fun) // true
console.log('drucken' in fun) // true
console.log('SagMe' im Spaß) // true

Durch Tests haben wir festgestellt, dass diese beiden Methoden nicht erkennen können, ob es sich bei einer Eigenschaft um eine eigene Eigenschaft oder eine Prototyp-Eigenschaft handelt. Durch die Kombination dieser beiden Methoden lässt sich jedoch erkennen, ob es sich um eine eigene Eigenschaft oder eine Prototyp-Eigenschaft handelt.

Der Beispielcode lautet wie folgt:

Funktion Erkennungsattribute(Objekt, Attribut) {
  wenn (Attr in Objekt) {
    wenn (obj.hasOwnProperty(attr)) {
      // Wenn es ein eigenes Attribut ist, gib 1 zurück
      Rückgabe 1
    } anders {
      // Wenn es sich um eine Prototypeigenschaft handelt, geben Sie 0 zurück.
      Rückgabe 0
    }
  } anders {
    // Wenn es kein solches Attribut gibt, gib -1 zurück
    Rückgabe -1
  }
}

Der Test läuft wie folgt ab:

console.log(Erkennungsattribute(Spaß, 'Name')) // 1
console.log(Erkennungsattribute(Spaß, 'drucken')) // 0
console.log(Erkennungsattribute(Spaß, 'SayMe')) // 1

4. isPrototypeOf()-Methode

Mit isPrototypeOf() lässt sich feststellen, ob ein Objekt in der Prototypenkette eines anderen Objekts vorhanden ist. Wenn ja, gibt sie true zurück, andernfalls false.

Der Beispielcode lautet wie folgt:

// Definieren Sie ein Objekt, das dem Prototypobjekt zugewiesen werden soll var obj = function () {
  this.name = 'Eine Schüssel Zhou'
}
var Hero = function () {} // Konstruktor definieren // Dem Prototyp des Konstruktors das definierte Objekt zuweisen Hero.prototype = obj

// Erstelle ein Objekt durch Hero var hero1 = new Hero()
var hero2 = neuer Held()
// Bestimmen Sie, ob sich die beiden erstellten Objekte in der Prototypenkette von obj befinden console.log(obj.isPrototypeOf(hero1)) // true
console.log(obj.isPrototypeOf(hero2)) // wahr

5. Erweitern integrierter Objekte

Einige der integrierten Objekte in JavaScript haben auch prototype . prototype Prototypeigenschaft der integrierten Objekte kann verwendet werden, um die Eigenschaften und Methoden der integrierten Objekte zu erweitern.

Die Eigenschaften und Methoden integrierter Objekte können sehr flexibel durch Prototypen erweitert werden, und der spezifische Inhalt der JavaScript-Sprache kann entsprechend den personalisierten Anforderungen formuliert werden.

Es gibt zwei Möglichkeiten, integrierte Objekte zu erweitern:

Durch direktes Hinzufügen neuer Eigenschaften und Methoden.

Verwenden Sie die Methode defineProperty() des Object-Objekts, um neue Eigenschaften oder Methoden hinzuzufügen. Diese Methode ist besser als die erste, da die erstellten Eigenschaften und Methoden sicherer sind.

Der Beispielcode lautet wie folgt:

// Eigenschaften und Methoden für Objekt erweitern // Erste Methode verwenden Object.prototype.MyPrint = function () {
  console.log('das ist MyPrint()')
}
// Verwenden der zweiten Methode Object.defineProperty(Object.prototype, 'MyInput', {
  Wert: Funktion () {
    console.log('das ist MyInput()')
  },
})
// Rufen Sie Object.prototype.MyPrint() auf // das ist MyPrint()
Object.prototype.MyInput() // das ist MyInput()

6. Fazit

Dieser Artikel stellt das Konzept des Prototyps in JavaScript und die Eigenschaften von Prototypen vor, zeigt, wie eigene Eigenschaften und Prototypeigenschaften erkannt werden und wie integrierte Objekte erweitert werden.

Dies ist das Ende dieses Artikels über die Details des JavaScript-Prototyps. Weitere relevante Inhalte zum JavaScript-Prototyp 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!