Heim > Web-Frontend > js-Tutorial > Hauptteil

Was ist ein Javascript-Prototyp? Detaillierte Erklärung des Javascript-Prototyps

不言
Freigeben: 2018-09-03 10:05:59
Original
1955 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Frage: Was ist der JavaScript-Prototyp? Die ausführliche Erklärung des JavaScript-Prototyps hat einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich ist.

Prototyp

Prototyp ist immer noch relativ wichtig. Apropos Prototyp: Was ist ein Prototyp?

Wenn der Konstruktor erstellt wird, gibt es ein Prototyp-Attribut. Das System erstellt und verknüpft standardmäßig ein Objekt . Der Zweck dieses Objekts besteht darin, Eigenschaften und Methoden zu enthalten, die von allen Instanzen eines bestimmten Typs gemeinsam genutzt werden können.
Um es ganz klar auszudrücken: Sie können das Prototypattribut im Konstruktor aufrufen, um auf den Prototyp zu verweisen, und so das Prototypobjekt dieser Objektinstanz erstellen.

Welche Vorteile bietet die Verwendung von Prototypen?

Der Vorteil der Verwendung eines Prototyps besteht darin, dass alle Objektinstanzen die darin enthaltenen Eigenschaften und Methoden gemeinsam nutzen können.

Ist Ihnen schwindelig? Ist es nicht super chaotisch? Konstruktor, Prototyp und Instanz, keine Sorge, ich werde es Ihnen in einem Satz erklären
Alle unsere Konstruktoren müssen sich irgendwann zu Instanzen entwickeln, um einen Sinn zu ergeben, da die im Konstruktor definierten Methoden dies nicht können Wird von allen Instanzen gemeinsam genutzt, sodass Sie nur die obere Ebene des Konstruktors finden können, bei der es sich um den Prototyp handelt. Die auf dem Prototyp definierten Eigenschaften und Methoden können von allen Instanzen gemeinsam genutzt werden. Dies ist die Art des Prototypobjekts

Sehen Sie, Sie werden anhand des Bildes erkennen, dass die Beziehung zwischen den dreien eine Dreiecksbeziehung ist


Was ist ein Javascript-Prototyp? Detaillierte Erklärung des Javascript-PrototypsEs ist sehr leicht zu verstehen, oder
Constructor.prototype = Prototype
Prototype .constructor = Konstruktor
Instanzobjekt .constructor = Konstruktor (dies liegt daran, dass das Instanzobjekt das Konstruktorattribut nicht auf sich selbst finden kann, sodass es es über __proto__ im Prototyp findet und zeigt an den Konstruktor über die Prototypenbrücke)
Instanzobjekt.__proto__ = Prototype

Der Prototyp kann nicht im Druck angezeigt werden. Er kann nur über

Constructor.prototypeIm Folgenden finden Sie zwei weitere Möglichkeiten, den Prototyp zu erhalten. Die Methode

isPrototypeOf()-Methode

: wird verwendet, um zu bestimmen, ob der Zeiger dieser Instanz auf diesen Prototyp zeigt. Object.getPrototypeOf()-Methode
: Ruft den Prototyp der Instanz ab. Die von dieser Methode unterstützten Browser sind IE9+, Firefox 3.5+, Safari 5+, Opera 12+ und Chrome, daher wird sie empfohlen Um diese Methode zu verwenden, erhalten Sie den Prototyp des Objekts.

假定有个Person构造函数和person对象
Person.prototype.isPrototypeof(person)  // 返回true说明前者是person1的原型
Object.getPrototypeOf(person) === Person.prototype // 获取person的原型
Nach dem Login kopieren

Das Grundprinzip, dass mehrere Objektinstanzen die vom Prototyp gespeicherten Eigenschaften und Methoden gemeinsam nutzen

Jedes Mal, wenn der Code eine Eigenschaft eines Objekts liest, wird eine Suche durchgeführt. Das Ziel ist das Attribut mit dem angegebenen Namen. Beginnen Sie mit der Objektinstanz selbst. Wenn ein Attribut mit dem angegebenen Namen in der Instanz gefunden wird, wird der Wert des Attributs zurückgegeben. Wenn es nicht gefunden wird, wird das Prototypobjekt durchsucht, auf das der Zeiger zeigt, und das Attribut mit dem angegebenen Namen wird im Prototypobjekt gesucht. Wenn diese Eigenschaft im Prototypobjekt gefunden wird, wird der Eigenschaftswert zurückgegeben.
Wir können auf den Wert im Prototyp zugreifen, aber wir können den Wert im Prototyp nicht überschreiben. Wenn wir der Instanz ein Attribut hinzufügen und der Attributname denselben Namen wie der Prototyp hat, wird dieses Attribut sein Diese Eigenschaft im Prototyp wurde blockiert (Override).

function Person() {}

Person.prototype.name = "George"
Person.prototype.sayName = function() {
    console.log(this.name)
}

let person1 = new Person();
let person2 = new Person();
person1.name = "命名最头痛";

// 在这一环节,person1.name会从他实例中找,若实例没找到,则继续搜索它的原型对象
console.log(person1.name); // 命名最头痛 
console.log(person2.name); // George
Nach dem Login kopieren

Das Hinzufügen einer Eigenschaft zu einem Instanzobjekt verhindert nur den Zugriff auf diese Eigenschaft im Prototyp, ändert diese Eigenschaft jedoch nicht.

Selbst wenn diese Eigenschaft auf Null gesetzt wird, wird diese Eigenschaft nur für die Instanz festgelegt und ihre Verbindung zum Prototyp nicht wiederhergestellt

. Wenn wir Instanzeigenschaften vollständig löschen möchten, können wir den Löschoperator verwenden, der es uns ermöglicht, die Eigenschaften im Prototyp erneut aufzurufen.

Verwendung des Löschoperators

依旧用上面那个例子
delete操作符可用于删除对象的属性,无论是实例上的属性,还是在原型上的属性都可以删

delete person1.name    // 删除这个实例的属性
delete Person.prototype.name    // 删除原型上的属性
delete Person.prototype.constructor // 删除constructor属性,这样就没办法指回函数了
Nach dem Login kopieren

hasOwnProperty()-Methode kann verwendet werden, um zu erkennen, ob eine Eigenschaft in der Instanz oder im Prototyp vorhanden ist. Diese Methode gibt nur dann true zurück, wenn die angegebene Eigenschaft in der Objektinstanz vorhanden ist. Es kann auch verstanden werden, dass die Methode hasOwnProperty verwendet wird, um zu erkennen, ob diese Eigenschaft eine Eigenschaft des Objekts selbst ist.

obj.hasOwnProperty('property name')


Demo:

function Person(){ 
  this.name = '命名最头痛'
}
var person = new Person()
Person.prototype.age = '18'
console.log(person.hasOwnProperty('name'))  // true
console.log(Person.prototype.hasOwnProperty('age')) // true
Nach dem Login kopieren

in-Operator

in-Operator hat zwei Verwendungszwecke

① platziert für Verwendet in - In der Schleife kann for-in alle aufzählbaren (aufzählbaren) Eigenschaften zurückgeben, auf die über Objekte zugegriffen werden kann (aufzählbare Eigenschaften sind auf einen Blick sichtbar).

Das obige ist der detaillierte Inhalt vonWas ist ein Javascript-Prototyp? Detaillierte Erklärung des Javascript-Prototyps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage