Verstehen von Prototypen in JS_Javascript-Kenntnissen

Jeder Konstruktor hat ein Attribut namens Prototyp. Dieses Attribut ist sehr nützlich, um allgemeine Variablen oder Funktionen für eine bestimmte Klasse zu deklarieren.

Definition des Prototyps

Sie müssen ein Prototypattribut nicht explizit deklarieren, da es in jedem Konstruktor vorhanden ist

Dieser Artikel basiert auf den folgenden Wissenspunkten:

1 Prototyp-Designmuster

Sie können clone() verwenden, um die Prototyp-Methode in .Net zu implementieren

Die Hauptidee der Prototypenmethode besteht darin, dass es jetzt eine Klasse A gibt und ich eine Klasse B erstellen möchte. Diese Klasse basiert auf A und kann erweitert werden. Wir nennen den Prototyp von B A.

2 JavaScript-Methoden können in drei Kategorien unterteilt werden:

eine Klassenmethode

b Objektmethoden

c-Prototyp-Methode

Beispiel:

function People(name)
{
 this.name=name;
 //对象方法
 this.Introduce=function(){
 alert("My name is "+this.name);
 }
}
//类方法
People.Run=function(){
 alert("I can run");
}
//原型方法
People.prototype.IntroduceChinese=function(){
 alert("我的名字是"+this.name);
}
 
//测试
var p1=new People("Windking");
p1.Introduce();
People.Run();
p1.IntroduceChinese(); 

3 obj1.func.call(obj)-Methode

Es bedeutet, obj als obj1 zu behandeln und die func-Methode aufzurufen

Okay, lasst uns die Probleme einzeln lösen:

Was bedeutet Prototyp?

Jedes Objekt in JavaScript verfügt über ein Prototypattribut. Die Erklärung des Prototypattributs eines Objekts in Javascript lautet: Gibt einen Verweis auf den Prototyp des Objekttyps zurück.

A.prototype = new B();

Das Verständnis von Prototypen sollte nicht mit Vererbung verwechselt werden. Der Prototyp von A ist eine Instanz von B. Es versteht sich, dass A alle Methoden und Eigenschaften in B geklont hat. A kann die Methoden und Eigenschaften von B verwenden. Der Schwerpunkt liegt hier eher auf dem Klonen als auf der Vererbung. Diese Situation kann auftreten: Der Prototyp von A ist eine Instanz von B und der Prototyp von B ist auch eine Instanz von A.

Sehen wir uns ein experimentelles Beispiel an:

function baseClass()
{
 this.showMsg = function()
 {
  alert("baseClass::showMsg"); 
 }
}
function extendClass()
{
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg(); // 显示baseClass::showMsg

Wir definieren zuerst die BaseClass-Klasse und dann ExtentClass. Wir planen jedoch, eine Instanz von BaseClass als Prototyp zu verwenden, und die zu klonende ExtendedClass enthält auch die Objektmethode showMsg.

extendClass.prototype = new baseClass() kann wie folgt gelesen werden: „ExtendClass“ wird erstellt, indem eine Instanz von „baseClass“ als Prototyp geklont wird.

Dann stellt sich die Frage, was passiert, wenn die Erweiterungsklasse selbst eine Methode mit demselben Namen wie die Methode der Basisklasse enthält?

Das Folgende ist erweitertes Experiment 2:

function baseClass()
{
 this.showMsg = function()
 {
  alert("baseClass::showMsg"); 
 }
}
function extendClass()
{
 this.showMsg =function ()
 {
  alert("extendClass::showMsg");
 }
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg();//显示extendClass::showMsg

Experimenteller Beweis: Wenn die Funktion ausgeführt wird, wird zunächst in der Ontologie nach der Funktion gesucht. Wenn sie nicht gefunden wird, wird nach der Funktion im Prototyp gesucht. Oder es kann verstanden werden, dass der Prototyp die Funktion mit demselben Namen nicht klont.

Dann wird es eine neue Frage geben:
Was passiert, wenn ich die Objektmethode showMsg von baseClass mithilfe einer Instanz von extensionClass aufrufen möchte?

Die Antwort ist die Verwendung von call:

extendClass.prototype = new baseClass();
var instance = new extendClass();

var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);//显示baseClass::showMsg

baseinstance.showMsg.call(instance); lautet hier „Rufen Sie die Instanz als baseinstance auf und rufen Sie ihre Objektmethode showMsg auf“
Okay, jemand hier könnte fragen, warum nicht baseClass.showMsg.call(instance);
verwenden

Das ist der Unterschied zwischen Objektmethoden und Klassenmethoden. Was wir nennen wollen, ist die Objektmethode von baseClass

Wenn Sie schließlich den folgenden Code klar verstehen, können Sie verstehen, was in diesem Artikel steht:

<script type="text/javascript">
function baseClass()
{
 this.showMsg = function()
 {
  alert("baseClass::showMsg"); 
 }
 this.baseShowMsg = function()
 {
  alert("baseClass::baseShowMsg");
 }
}
baseClass.showMsg = function()
{
 alert("baseClass::showMsg static");
}
function extendClass()
{
 this.showMsg =function ()
 {
  alert("extendClass::showMsg");
 }
}
extendClass.showMsg = function()
{
 alert("extendClass::showMsg static")
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg(); //显示extendClass::showMsg
instance.baseShowMsg(); //显示baseClass::baseShowMsg
instance.showMsg(); //显示extendClass::showMsg
baseClass.showMsg.call(instance);//显示baseClass::showMsg static
var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);//显示baseClass::showMsg
</script>

Bei dem obigen Inhalt geht es um das Verständnis von Prototypen in JS. Ich hoffe, es gefällt Ihnen.