Explication détaillée du code du modèle objet pour les propriétés et méthodes personnalisées JavaScript

En JavaScript, il existe de nombreux modes pour créer un objet avec des propriétés et des méthodes personnalisées

1. Mode de création directe. Il s'agit du modèle le plus simple et le plus direct. Créez d'abord un objet de type référence, puis ajoutez-y des propriétés et des méthodes personnalisées. L'exemple de code est le suivant :

var person = new Object(); 
person.name = "Sam"; 
person.age = 16; 
person.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
person.speak();

Comme vous pouvez le voir, un objet de type Object est créé ci-dessus, puis les attributs name et age ainsi qu'une méthode speak y sont ajoutés. Bien que créer directement un modèle soit simple, son inconvénient est évident : lorsque nous devons créer de nombreux objets identiques, nous devons écrire du code de manière répétée à chaque fois. Afin de résoudre ce problème, nous pouvons encapsuler le processus de création d’objets, nous avons donc le modèle d’usine suivant.
2. Mode usine. Le modèle d'usine est un modèle de conception couramment utilisé en programmation. Il encapsule principalement le processus de création d'objets. L'exemple de code est le suivant :

function createPerson(name, age){ 
var person = new Object(); 
person.name = name; 
person.age = age; 
person.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
return person; 
} 
var person1 = createPerson("Sam", 16); 
var person2 = createPerson("Jack", 18);

Après avoir utilisé le modèle d'usine, créez le même type. des objets deviennent plus simples. Mais le modèle d'usine ne résout pas le problème de l'identification des objets, c'est-à-dire que nous ne pouvons pas déterminer le type spécifique de l'objet créé. Les développeurs expérimentés en programmation orientée objet savent que la création d'objets doit être basée sur des classes. Une fois que vous disposez d'une classe personnalisée spécifique, vous pouvez ensuite créer des objets de cette classe. Heureusement, en JavaScript, nous pouvons simuler une classe grâce au modèle constructeur.
3. Modèle de constructeur. Il n'y a aucune différence entre les constructeurs et les fonctions ordinaires. N'importe quelle fonction ordinaire peut être utilisée comme constructeur, à condition que l'opérateur new soit utilisé ; n'importe quel constructeur peut également être appelé comme fonction ordinaire. Cependant, en JavaScript, il existe une convention selon laquelle le nom de la fonction utilisé comme constructeur doit avoir la première lettre en majuscule. L'exemple de code est le suivant :

function Person(name, age){ 
this.name = name; 
this.age = age; 
this.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
} 
var person1 = new Person("Sam", 16); 
var person2 = new Person("Jack", 18);

Comme vous pouvez le voir, à l'intérieur du constructeur, nous l'utilisons pour ajouter des propriétés et des méthodes. Alors, à quoi cela fait-il référence ? Lorsque nous créons un objet Person, cela fait référence à l'objet créé. Nous pouvons désormais identifier les types spécifiques d’objets personne1 et personne2. Après avoir utilisé alert(person1 instanceOf Person), vous pouvez constater que la valeur de sortie est vraie. Mais le modèle de constructeur a aussi ses propres inconvénients, c'est-à-dire que les méthodes déclarées dans le constructeur seront recréées à chaque fois qu'un nouvel objet est créé (en JavaScript, les fonctions sont aussi des objets). En d’autres termes, les méthodes du constructeur sont liées à l’objet et non à la classe. La sortie du code ci-dessous peut vérifier notre inférence.
alert(person1.speak == person2.speak); // false Un moyen relativement simple de résoudre cette lacune est de placer la déclaration de fonction en dehors du constructeur, c'est-à-dire :

function Person(name, age){ 
this.name = name; 
this.age = age; 
this.speak = speak; 
} 
function speak(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
var person1 = new Person("Sam", 16); 
var person2 = new Person("Jack", 18); 
alert(person1.speak == person2.speak); // true

Le problème est résolu, mais cette approche crée de nouveaux problèmes. Premièrement, la fonction speak est déclarée dans la portée globale, mais elle ne peut être utilisée que dans le constructeur Person. Il existe un risque d'utilisation abusive lorsqu'elle est placée dans la portée globale. Deuxièmement, si un type personnalisé a de nombreuses méthodes, vous devez alors le faire. déclarer de nombreuses fonctions globales, ce qui non seulement entraînera une pollution à l'échelle mondiale, mais ne favorisera pas non plus l'encapsulation du code. Alors, existe-t-il un moyen de créer une méthode de type personnalisée liée à une classe sans polluer la portée globale ? La réponse est d’utiliser un modèle prototype.
4. Mode prototype. Après avoir déclaré une nouvelle fonction, la fonction (en JavaScript, les fonctions sont également des objets) aura un attribut prototype. Un prototype est un objet qui représente les propriétés et méthodes publiques appartenant à tous les objets créés par cette fonction. L'exemple de code est le suivant :

function Person(){} 
Person.prototype.name="Sam"; 
Person.prototype.age=16; 
Person.prototype.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
var person1 = new Person(); 
person1.speak(); 
var person2 = new Person(); 
alert(person1.speak == person2.speak); // true

Comme vous pouvez le voir, bien que la méthode speak ne soit pas déclarée dans le constructeur, l'objet person1 que nous avons créé peut toujours appeler la méthode speak. JavaScript a une règle de recherche. Recherchez d'abord les attributs et les méthodes de l'instance, et retournez si trouvé, sinon recherchez à nouveau dans le prototype. Le modèle prototype rend la méthode liée à la classe et ne pollue pas la portée globale, mais il a aussi ses propres inconvénients : Premièrement, toutes les propriétés sont également liées à la classe, ce qui signifie que tous les objets partagent une propriété, ce qui est évidemment déraisonnable. ; Deuxièmement, il n'existe aucun moyen de transmettre les données d'initialisation au constructeur. La solution est simple, il suffit d'utiliser un mélange de modèle de constructeur et de modèle de prototype.
5. Mode combinaison. L'exemple de code est le suivant :

function Person(name, age){ 
this.name = name; 
this.age = age; 
} 
Person.prototype.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
var person1 = new Person(); 
person1.speak(); 
var person2 = new Person(); 
alert(person1.speak == person2.speak); // true

Il n'est pas difficile de constater que le mode combinaison répond à tous nos besoins, et c'est aussi un mode actuellement largement utilisé. Les développeurs ayant de l'expérience en programmation orientée objet peuvent trouver qu'il est un peu gênant de placer la déclaration du prototype en dehors du constructeur, alors peut-elle être placée à l'intérieur du constructeur ? La réponse est oui, utilisez simplement le mode de combinaison dynamique.
6. Mode combinaison dynamique. Le principe est de déterminer d'abord si un certain attribut ou méthode dans le prototype a été déclaré. Sinon, déclarez l'intégralité du prototype, sinon ne faites rien. L'exemple de code est le suivant :

function Person(name, age){ 
this.name = name; 
this.age = age; 
if (Person.prototype.speak == "undefined"){ 
Person.prototype.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
} 
}

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!