Explication détaillée de la façon de définir des instances de classe en JavaScript via des fonctions

Illustrons d'abord avec un exemple :

function myClass() 
{ 
var id = 1; 
var name = "johnson"; 
//properties 
this.ID = id; 
this.Name = name; 
//method 
this.showMessage = function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name); 
} 
} 
var obj1 = new myClass(); 
var obj2 = new myClass();

La définition de la fonction est en fait équivalente au constructeur de la classe, et les deux dernières phrases servent à créer une instance de celle-ci classe. Analysons d'abord la première phrase : var obj1 = new myClass(); Lors de l'utilisation de new pour créer une instance d'une classe, l'interpréteur créera d'abord un objet vide. Exécutez ensuite cette fonction myClass et pointez ce pointeur vers une instance de cette classe. Lorsque vous rencontrez this.ID = id; and this.Name = name; and this.showMessage = function(){...}, ces deux propriétés et cette méthode seront créées, et les variables id et name seront la définition de la fonction de niveau valeur est affectée à ces deux propriétés et à cet objet fonction (shwoMessage). Ce processus équivaut à l'initialisation de l'objet, similaire au constructeur en C#. Enfin, new renvoie cet objet. Regardez la deuxième phrase : var obj2 = new myClass(); Le processus d'exécution est le même que la phrase précédente, c'est-à-dire créer un objet vide, puis exécuter la fonction myClass et définir deux attributs et une méthode.
Comme le montre l'analyse ci-dessus, la manière ci-dessus d'implémenter une classe consiste à définir les méthodes d'attribut de la classe dans la définition de la fonction. Il y a des inconvénients. Si deux instances ou plus de cette classe doivent être créées, comme indiqué ci-dessus, ces propriétés seront créées plusieurs fois.
Alors comment éviter cette situation ? Le prototype est un prototype comme son nom. Chaque fonction a un sous-objet prototype, qui représente en fait la collection de membres de cet objet fonction ici, nous pouvons dire que le prototype est en fait la classe A. ensemble de membres. Les propriétés et méthodes définies par le prototype sont exécutées avant l'exécution du constructeur de la fonction, donc avant qu'un objet ne soit nouveau, les membres du prototype ont effectivement été exécutés. Regardons d'abord un exemple : la structure de la classe

function myClass() 
{ 
//构造函数 
} 
myClass.prototype = 
{ 
ID: 1, 
Name: "johnson", 
showMessage: function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name); 
} 
} 
var obj1 = new myClass(); 
var obj2 = new myClass();

est toujours la même que l'exemple précédent, mais ici elle est implémentée à l'aide d'un prototype. Examinons d'abord les deux dernières phrases. Comme mentionné précédemment, prototype est exécuté avant le constructeur de la fonction, c'est-à-dire avant que var obj1 = new myClass(); cette classe ait déjà un ID, un attribut Name et une méthode showMessage. Lorsque l'exécuteur écrit une phrase, le processus d'exécution est le suivant. Notez la comparaison avec l'exemple précédent : créez d'abord un objet vide et pointez le pointeur this vers cet objet. Affectez ensuite tous les membres de l'objet prototype de la fonction à cet objet (notez que ces membres ne sont pas recréés). Exécutez ensuite le corps de la fonction. Enfin, new renvoie cet objet. Lors de l'exécution de la phrase suivante : ce processus est également exécuté et ces membres ne seront pas créés à plusieurs reprises.
Le code ci-dessus n'est qu'un exemple. Dans les projets réels, il peut y avoir un grand nombre de membres dans la classe et un grand nombre d'instances peuvent devoir être créées. Ce prototype montrera sa supériorité. De plus, le code ci-dessus utilise la syntaxe des accolades pour définir les membres du prototype, afin que le code paraisse plus clair. Il s’agit d’un modèle de conception de classe recommandé. Bien sûr, dans de nombreux projets, nous pouvons trouver de meilleurs modèles. Nous espérons également avoir des modèles de programmation JavaScript plus optimisés pour continuer à en introduire de nouveaux. Nous espérons également qu'au fil du temps, tous les principaux navigateurs standardiseront également l'analyse JavaScript. .
Comme mentionné ci-dessus, les membres définis par prototype apparaissent avant le constructeur. Il peut être prouvé que dans l'exemple ci-dessus, le constructeur est vide. Ajoutez un alert(this.Name); var obj1 = new myClass();, vous verrez une boîte de dialogue contextuelle affichant les valeurs d'attribut correctes.
Le code suivant :

function subClass(){ } 
subClass.prototype = 
{ 
Name: "sub" 
} 
function myClass() 
{ 
//构造函数 
} 
myClass.prototype = 
{ 
ID: 1, 
Name: "johnson", 
SubObj: new subClass(), 
showMessage: function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name + "SubObj.Name:" + this.SubObj.Name); 
} 
} 
var obj1 = new myClass(); 
obj1.SubObj.Name = "XXX"; 
obj1.showMessage(); 
var obj2 = new myClass(); 
obj2.showMessage();

Ici, un type de référence est défini dans myClass, son type est une classe subClass que nous avons personnalisée, et il y a un attribut Name dans cette sous-classe. Puisque l'objet prototype est partagé, selon notre analyse ci-dessus : lors de l'exécution de var obj1 = new myClass();, les membres du prototype de myClass seront copiés dans cette instance obj1. Mais SubObj est ici un type de référence. Lorsque var obj2 = new myClass(); est exécuté, les membres ID et Name du prototype seront copiés dans obj2, mais l'attribut SubObj ne sera pas copié, mais sera référencé dans le prototype. . SubObj, donc parce que la phrase précédente a modifié la valeur de obj1.Subobj.Name, lors de l'utilisation de new pour générer une instance obj2, la valeur modifiée est référencée.
Ainsi, lorsque vous utilisez prototype pour définir une classe, vous devez toujours définir les attributs dans le constructeur et définir les méthodes sur le prototype du constructeur. Comme suit :

function myClass(id, name) 
{ 
this.ID = id; 
this.Name = name; 
} 
myClass.prototype = 
{ 
showMessage: function() 
{ 
alert("ID: " + this.ID + ", Name: " + this.Name); 
}, 
showMessage2: function() 
{ 
alert("Method2"); 
} 
} 
var obj1 = new myClass(1, "johnson"); 
obj1.showMessage(); 
obj1.Name="John"; 
obj1.showMessage(); 
var obj2 = new myClass(2, "Amanda"); 
obj2.showMessage();

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!