Comprendre le prototype dans les compétences JS_javascript

Chaque constructeur possède un attribut appelé prototype. Cet attribut est très utile pour déclarer des variables ou des fonctions communes pour une classe spécifique.

Définition du prototype

Vous n'avez pas besoin de déclarer explicitement un attribut de prototype car il existe dans chaque constructeur

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 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éthodes objets

méthode du prototype c

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é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 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, 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 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 appeler la méthode objet showMsg de baseClass à l'aide d'une instance de extendClass ?

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>

Le contenu ci-dessus concerne la compréhension du prototype en JS. J'espère qu'il vous plaira.