Detaillierte Erklärung des Prototyps in JS

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung des Prototyps in JS vor, die einen gewissen Referenzwert hat. Jetzt können Freunde in Not darauf verweisen.

Der Fototyp in JS ist der Vergleich in JS . Ein schwer zu verstehender Teil

Dieser Artikel basiert auf den folgenden Wissenspunkten:

1 Prototyp-Designmuster

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

Die Hauptidee der Prototyp-Methode ist, dass es jetzt eine Klasse A gibt und ich eine Klasse B erstellen möchte. Diese Klasse wird mit A prototypisiert und kann sein erweitert. Wir nennen den Prototyp von B A.

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

eine Klassenmethode

b Objektmethode

c Prototypmethode

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

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

Okay, lass uns die Fragen einzeln lösen:

Was bedeutet Prototyp?

Jedes Objekt in JavaScript hat 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 müssen dann ExtentClass definieren, aber wir planen, eine Instanz von BaseClass als Prototyp zu verwenden, und Die zu klonende ExtendClass 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 wird es eine Frage geben: Was passiert, wenn extensionClass selbst eine Methode mit demselben Namen wie die Methode von baseClass 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

Das Experiment beweist: Wenn die Funktion ausgeführt wird, geht sie zuerst zur Funktion der Ontologie, um sie zu finden gefunden, wird es ausgeführt. Wenn es nicht gefunden werden kann, wird es zur Prototyp-Suchfunktion weitergeleitet. Oder es kann verstanden werden, dass der Prototyp die Funktion mit demselben Namen nicht klont.

Dann wird es eine neue Frage geben:

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

Die Antwort ist, dass Sie call:

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


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

baseinstance.showMsg.call(instance); verwenden können, hier lautet „Instanz als Basisinstanz aufrufen und ihre Objektmethode showMsg aufrufen“

Okay, hier könnte jemand fragen, warum nicht baseClass.showMsg.call(instance);

Das ist der Unterschied zwischen Objektmethoden und Klassenmethoden. Was wir aufrufen möchten, ist das Objekt baseClass-Methode

Wenn Sie schließlich den folgenden Code klar verstehen, können Sie verstehen, was dieser Artikel sagt:

<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>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass es für alle hilfreich sein wird. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Analyse von Funktionsdeklarationen und Funktionsausdrücken in js

So konvertieren Sie Pseudo-Arrays über js Für Array

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Prototyps in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!