Explication détaillée du prototype en JS

Cet article présente principalement l'explication détaillée du prototype en JS, qui a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Le phototype en JS est la comparaison en JS. . Une partie difficile à comprendre

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

1 Modèle de conception de prototype

Vous pouvez utiliser clone( dans . .Net ) 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. Cette classe est prototypée avec 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 :

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

signifie considérer obj comme obj1 et appeler la méthode func

D'accord, résolvons les questions une par une :

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 :

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 voulons définir extendClass, mais nous prévoyons d'utiliser une instance de baseClass comme prototype cloner extendClass Il 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

L'expérience prouve : lorsque la fonction est en cours d'exécution, elle ira d'abord à la fonction de l'ontologie pour la trouver Si. elle est trouvée, elle sera exécutée. Si elle n'est pas trouvée, elle sera exécutée. Recherchez 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 de extendClass pour appeler la méthode objet showMsg de baseClass ?

La réponse est que vous pouvez utiliser call:

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


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

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 peut demander, pourquoi ne pas utiliser baseClass.showMsg.call(instance);

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

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>

Ce qui précède est tout le contenu de cet article article , j'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Analyse des déclarations de fonctions et des expressions de fonction en js

Comment convertir des pseudo-tableaux via js Pour tableau

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!