Was genau ist Prototyp in Javascript? Javascript-Tipps

Javascript ist ebenfalls eine objektorientierte Sprache, aber es ist eine prototypbasierte Sprache und keine klassenbasierte Sprache. In Javascript scheint es keinen großen Unterschied zwischen Klassen und Objekten zu geben.

Was ist ein Prototyp:

Das durch die Funktion definierte Objekt verfügt über ein Prototypattribut, und das Prototypattribut zeigt auf ein Prototypobjekt. Beachten Sie, dass das Prototypattribut und das Prototypobjekt zwei verschiedene Dinge sind. Achten Sie daher auf den Unterschied. Es gibt ein weiteres Konstruktorattribut im Prototypobjekt. Dieses Konstruktorattribut verweist ebenfalls auf ein Konstruktorobjekt, und dieses Konstruktorobjekt ist genau die Funktion selbst. Ist das nicht sehr kompliziert? Im Pseudocode wie folgt ausgedrückt:

var function{
prototype:prototype{
constructor:constructor == function
}
}

Noch nicht verstanden? Schauen Sie sich das Bild an:

Die Rolle des Prototyps:

Was genau macht dieser Prototyp? Schauen Sie sich das Beispiel unten an:

function jb51(){
}
jb51.prototype.name = "a";
var test = new jb51();
alert(test.name)//"a";

Es ist seltsam, offensichtlich ist das Namensattribut nicht zum Testen festgelegt, aber warum gibt es einen Wert?

Dies ist der Beitrag des Prototyps. Das Namensobjekt im Prototypattribut in uw3c wird in das Attribut des Objekttests vererbt, nachdem uw3c vom neuen Konstruktor erstellt wurde. Weiterlesen:

var name = "js";
function jb51(name){
alert(this.name);//"css"
}
jb51.prototype.name = "css";
var test = new jb51();
test()

Warum ist der Wert von Alert nicht „js“? Der Ablauf läuft ungefähr wie folgt ab:

var test={};
uw3c.call(test);

Der erste Schritt besteht darin, ein neues Objekt (Test) zu erstellen.

Der zweite Schritt besteht darin, das integrierte Prototypobjekt des Objekts (Test) auf das Prototypobjekt festzulegen, auf das das Prototypattribut des Konstruktors verweist (d. h. uw3c).

Der dritte Schritt besteht darin, das Objekt (Test) als Parameter zu verwenden, um den Konstruktor (d. h. uw3c) aufzurufen, um die Initialisierungsarbeit wie die Elementeinstellung abzuschließen.

Im zweiten Schritt erschien ein neuer Begriff, der das integrierte Prototypobjekt ist. Zur Unterscheidung nenne ich ihn inobj, und inobj zeigt auf Prototypobjekt der Funktion uw3c. Alle Eigenschaften oder Funktionen, die im Prototypobjekt von uw3c erscheinen, können direkt im Testobjekt verwendet werden. Dies ist die Prototypenvererbung in JS.

Normalerweise erstellen Sie ein Objekt wie dieses:

function person(name){
this.sayHi = function(){
alert('hi ' + this.name);
}
this.name = name;
}
var p = new person("dan");
p.sayHi(); 

Verwenden Sie oben das Schlüsselwort new, um eine Objektinstanz über ein Objekt zu erstellen (Funktionen sind ebenfalls spezielle Objekte).

In klassenbasierten Sprachen werden Attribute oder Felder normalerweise vorab in der Klasse definiert, in Javascript können Felder jedoch nach der Erstellung des Objekts zur Klasse hinzugefügt werden.

function animal(){}
var cat = new animal();
cat.color = "green"; 

Oben gehört das Farbfeld nur zur aktuellen Katzeninstanz.
Was wäre, wenn die später hinzugefügten Felder in allen Instanzen von animal vorhanden sein sollen?

--使用Prototype
function animal(){}
animal.prototype.color= "green";
var cat = new animal();
var dog = new animal();
console.log(cat.color);//green
console.log(dog.color);//green 

Über Prototype können nicht nur Felder, sondern auch Methoden hinzugefügt werden.

function animal(){}
animal.prototype.color= "green";
var cat = new animal();
var dog = new animal();
console.log(cat.color);//green
console.log(dog.color);//green
animal.prototype.run = funciton(){
console.log("run");
}
dog.run(); 

Es stellt sich heraus, dass Sie über das Prototypattribut auch das Verhalten des Objekts nach seiner Erstellung ändern können.
Sie können beispielsweise einem speziellen Objekt namens Array eine Methode hinzufügen.

Array.prototype.remove = function(elem){
var index = this.indexof(elem);
if(index >= 0){
this.splice(index, 1);
}
}
var arr = [1, 2, 3] ;
arr.remove(2); 

Zusätzlich zum Definieren von Attributen oder Methoden für Objekte über den Prototyp können Sie auch Klassenattribute oder -methoden über den Konstruktor des Objekts definieren.

function animal(){
this.color = "green";
this.run = function(){
console.log("run");
}
}
var mouse = new animal();
mouse.run(); 

Der obige Ansatz kann es auch ermöglichen, dass alle Tierinstanzen alle Felder und Methoden gemeinsam nutzen. Ein weiterer Vorteil besteht darin, dass Sie im Konstruktor lokale Variablen der Klasse verwenden können.

function animal(){
var runAlready = false;
this.color = "green";
this.run = funciton(){
if(!runAlreadh){
console.log("start running");
} else {
console.log("already running")
}
}
} 

Tatsächlich besteht ein praktischerer Ansatz darin, die Felder und Verhaltensweisen einer Klasse über den Konstruktor in Kombination mit dem Prototyp zu definieren.

function animal(){
var runAlready = false;
this.run = function(){
if(!runAlready){
console.log('i am running');
} else {
console.log("i am already running");
}
}
}
animal.prototype.color = '';
animal.prototype.hide = funciton(){
console.log("");
}
var horse = new animal();
horse.run();
horse.hide(); 

Prototype ermöglicht es uns, das Verhalten eines Objekts oder einer Klasse nach der Erstellung des Objekts zu ändern, und diese über das Prototyp-Attribut hinzugefügten Felder oder Methoden werden von allen Objektinstanzen gemeinsam genutzt.