Résumé de l'apprentissage JavaScript compétences prototype_javascript

Le prototype en JS est une partie difficile à comprendre en JS

Cet article est basé sur les points de connaissances suivants :

1 Modèle de conception de prototype
Dans .Net, clone() peut être utilisé pour implémenter la méthode prototype

L'idée principale de la méthode prototype est qu'il existe maintenant une classe A, et je veux créer une classe B, qui est prototypée par A. Et peut être étendu. Nous appelons le prototype de B A.

2 méthodes JavaScript peuvent être divisées en trois catégories :
une méthode de classe -> 🎜>b -> Méthode objet

c -> Méthode prototype

Exemple :

3. La méthode obj1.func.call(obj)

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(); //调用原型方法

signifie traiter obj comme obj1 , lors de l'appel de la méthode func, la méthode func de obj1 a été appelée à l'origine. Cependant, après avoir passé obj, l'objet de contexte a été modifié et la méthode de ojb1 a été appelée via l'objet obj

D'accord, résolvons. les problèmes un par un :

Que signifie prototype ?

Chaque objet en JavaScript a un attribut prototype L'explication de l'attribut prototype d'un objet en Javascript est : renvoyer une référence au prototype du type d'objet.

A.prototype = new B();

La compréhension du prototype ne doit pas être confondue avec l'héritage. Le prototype de A est une instance de B. On peut comprendre que A a cloné toutes les méthodes et propriétés de B. A peut utiliser les méthodes et propriétés de B. L'accent est ici mis sur le clonage plutôt que sur l'héritage. Cette situation peut se produire : le prototype de A est une instance de B, et le prototype de B est également une instance de A. Regardons d'abord un exemple expérimental :

Nous définissons d'abord la classe baseClass, puis nous définissons extendClass , Mais nous prévoyons d'utiliser une instance de baseClass comme prototype, et la extendClass que nous clonons contient également la méthode objet showMsg.

function baseClass(){

  this.showMsg = function(){

    alert("baseClass::showMsg");  

  }

}

function extendClass(){

}

extendClass.prototype = new baseClass();

var instance = new extendClass();

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

extendClass.prototype = new baseClass() peut être lu comme : extendClass est créé en clonant une instance de baseClass comme prototype.

Ensuite, il y aura une question, et si extendClass lui-même contenait une méthode avec le même nom que la méthode de baseClass ?

Ce qui suit est l'expérience étendue 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

Preuve expérimentale :

Lorsque la fonction est exécutée, elle recherchera d'abord la fonction dans l'ontologie. Si elle est trouvée, elle sera exécutée. Si elle ne peut pas être trouvée, elle recherchera la fonction dans le prototype. Ou on peut comprendre que le prototype ne clonera pas la fonction du même nom.

Ensuite, il y aura une nouvelle question :

Et si je souhaite utiliser une instance d'instance de extendClass pour appeler la méthode objet showMsg de Classe de base ? La réponse est que vous pouvez utiliser call :

baseinstance.showMsg.call(instance) ici ; Lire comme "Appeler l'instance en tant que baseinstance et appeler sa méthode objet showMsg"

extendClass.prototype = new baseClass();

var instance = new extendClass();

var baseinstance = new baseClass();

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

D'accord, quelqu'un peut demander ici, pourquoi ne pas utiliser baseClass.showMsg.call(instance);

C'est la différence entre les méthodes objet et les méthodes de classe. Ce que nous voulons appeler est la méthode objet de baseClass

Enfin,

Si vous comprenez clairement le code suivant, alors vous pouvez comprendre ce que dit cet article :

Ce qui précède est le contenu du résumé d'apprentissage JavaScript prototype_javascript skills Pour plus de contenu connexe, veuillez faire attention au chinois PHP. site Web (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