Zusammenfassung des JavaScript-Lernens: Prototyp_Javascript-Fähigkeiten

Prototyp in JS ist ein schwer zu verstehender Teil in JS

Dieser Artikel basiert auf den folgenden Wissenspunkten:

1 Prototyp-Entwurfsmuster
In .Net, clone() kann zum Implementieren der Prototyp-Methode verwendet werden

Die Hauptidee der Prototyp-Methode besteht darin, dass es jetzt eine Klasse A gibt und ich eine Klasse B erstellen möchte, die als Prototyp erstellt wird von A. Und erweiterbar. Wir nennen den Prototyp von B A.

2 JavaScript-Methoden können in drei Kategorien unterteilt werden:
a -> 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, Beim Aufrufen der func-Methode wurde ursprünglich die func-Methode von obj1 aufgerufen. Nach der Übergabe von obj wurde jedoch das Kontextobjekt geändert und die Methode von ojb1 über das obj-Objekt aufgerufen die Probleme einzeln. :

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

var instance = new extendClass();

instance.showMsg(); // 显示baseClass:showMsg

Wir definieren zuerst die BaseClass-Klasse und dann die ExtentClass Wir planen jedoch, eine Instanz von baseClass als Prototyp zu verwenden, und die von uns geklonte extensionClass 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 gefunden wird, wird sie ausgeführt. 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 ist, wenn ich eine Instanz von extensionClass verwenden möchte, um die Objektmethode showMsg aufzurufen? Basisklasse?

Die Antwort ist, dass Sie hier

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 ; Lesen Sie als „Rufen Sie die Instanz als Basisinstanz auf und rufen Sie ihre Objektmethode showMsg auf“

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

Das ist der Unterschied zwischen Objektmethoden und Klassenmethoden 🎜>

Das Obige ist der Inhalt des JavaScript-Lernzusammenfassungsprototyps_javascript-Fähigkeiten. Für weitere verwandte Inhalte achten Sie bitte auf PHP-Chinesisch Website (www.php.cn)!

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