Prototypen in JavaScript verstehen

Fototyp in JS ist in JS ein schwer zu verstehender Teil. JavaScript-Methoden können in drei Kategorien unterteilt werden: Klassenmethoden, Objektmethoden und Prototypmethoden.

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();

obj1.func.call(obj)-Methode bedeutet, obj als obj1 zu behandeln und die func-Methode aufzurufen.

Was bedeutet Prototyp?

Jedes Objekt in JavaScript hat ein Prototypattribut. Die Erklärung des Prototypattributs eines Objekts in Javascript lautet: Geben Sie 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();
instance = new extendClass();
instance.showMsg(); // 显示baseClass::showMsg

Wir definieren zuerst die BaseClass-Klasse und möchten dann ExtendClass definieren, aber wir planen, eine Instanz von BaseClass als Prototyp zu verwenden zu klonen extensionClass Es enthält auch die showMsg-Objektmethode. „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();
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 , wird es ausgeführt. Wenn es nicht gefunden werden kann, wird es in der Prototypfunktion gesucht. 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();
instance = new extendClass();
var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);//显示baseClass::showMsg

baseinstance.showMsg.call(instance); hier lesen können als „Instanz als Basisinstanz aufrufen und ihre Objektmethode showMsg aufrufen“. Okay, jemand könnte hier fragen, warum nicht baseClass.showMsg.call(instance); Das ist der Unterschied zwischen Objektmethoden und Klassenmethoden. Was wir aufrufen möchten, ist die Objektmethode von baseClass

Schließlich Folgender Code: Wenn Sie es klar verstehen, haben Sie verstanden, 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();
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>