Analyse d'exemples d'utilisation de prototype dans les compétences JS_javascript

Les exemples de cet article décrivent l'utilisation du prototype en JS. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

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

Cet article s'appuie sur les points de connaissances suivants :

1 modèle de conception de prototype

Vous pouvez utiliser clone() pour implémenter la méthode prototype dans .Net
L'idée principale de la méthode prototype est qu'il existe maintenant une classe A et que je souhaite créer une classe B. Cette classe est basée sur A et peut être étendue. 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

Les exemples sont les suivants :

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 méthodes obj1.func.call(obj)

Cela signifie traiter obj comme obj1 et appeler la méthode func

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 la suivante : renvoyer une référence au prototype du type d'objet.

A.prototype = new B();

Comprendre le prototype ne doit pas être confondu 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 :

function baseClass()
{
 this.showMsg = function()
 {
   alert("baseClass::showMsg");  
 }
}
function extendClass()
{
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg(); // 显示baseClass::showMsg

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 classe extendée à cloner contient également la méthode objet 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 : que se passe-t-il si extendClass lui-même contient une méthode portant 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 en cours d'exécution, 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 :

Que faire si je souhaite utiliser une instance de extendClass pour appeler la méthode objet showMsg de baseClass ?

La réponse est d'utiliser l'appel :

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

Le baseinstance.showMsg.call(instance); se lit ici comme "Appeler l'instance en tant que baseinstance et appeler sa méthode objet showMsg"
D'accord, quelqu'un ici pourrait demander 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 :

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

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.