Analyse von Anwendungsbeispielen für Prototypen in JS_Javascript-Kenntnissen

Die Beispiele in diesem Artikel beschreiben die Verwendung von Prototypen in JS. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Fototyp in JS ist in JS ein schwer zu verstehender Teil

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 Prototyp-Methode 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 Objektmethode
c-Prototyp-Methode

Beispiele sind wie folgt:

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.

Schauen wir uns zunächst 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 kommt eine neue Frage:

Was passiert, wenn ich eine Instanz von extensionClass verwenden möchte, um die Objektmethode showMsg von baseClass aufzurufen?

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 Dies ist der Unterschied zwischen Objektmethoden und Klassenmethoden. Was wir nennen möchten, 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>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.