Explication détaillée du modèle de constructeur des modèles de conception JS

Cette fois, je vous apporte une explication détaillée du modèle Constructeur du Design Pattern de JS. Quelles sont les Précautions lors de l'utilisation du modèle de constructeur JS ici ? sont Voyons des cas pratiques.

Concept
Le constructeur est utilisé pour créer un type spécifique d'objet. Nous déclarons non seulement l'objet utilisé, le constructeur peut également accepter des paramètres pour définir les valeurs des membres de l'objet lorsqu'il l'est. créé en premier. Vous pouvez également déclarer des propriétés et méthodes d'objets de type personnalisé.

Fonction et notes

est utilisé pour créer des objets de types spécifiques.

Attribuez une valeur à l'objet lorsque vous le déclarez pour la première fois

Vous pouvez transmettre des paramètres, déclarer le constructeur vous-même et attribuer des attributs et des méthodes

Remarques :

Faites attention à l'utilisation de new

pour le distinguer d'un singleton

Utilisation de base
En JavaScript, le constructeur est généralement considéré à utiliser pour implémenter des instances, et JavaScript ne fait pas le concept d'une classe, mais avec un constructeur spécial. En utilisant l'opération new, nous pouvons indiquer à JavaScript que nous voulons créer un nouvel objet et que les membres du nouvel objet sont tous définis dans le constructeur. Dans le constructeur, cela pointe vers l'objet nouvellement créé. La syntaxe de base est la suivante :

function PersonBir(name, year, month) {
    this.month = month;    this.year = year;    this.name = name;    this.output= function () {
        return this.name + ":" + this.year +"年"+ this.month+"月";
    };
}var ming= new PersonBir("小明", 1998, 5);var gang= new PersonBir("小刚", 2000, 4);
console.log(ming.output());
console.log(gang.output());1234567891011121314

C'est la manière la plus simple de construire une fonction, mais avons-nous trouvé un problème lorsque nous héritons ? Si cela semble trop gênant, nous pouvons donc ajouter la méthode de sortie à l'objet créé via le prototype, regardez le code suivant

function PersonBir(name, year, month) {
    this.month = month;    this.year = year;    this.name = name；
}
PersonBir.prototype.output=function(){
     return this.name + ":" + this.year +"年"+ this.month+"月";
}var ming= new PersonBir("小明", 1998, 5);var gang= new PersonBir("小刚", 2000, 4);
console.log(ming.output());
console.log(gang.output());123456789101112

De cette façon, l'instance unique de sortie peut être dans l'instance d'objet PersonBir Pour une utilisation partagée, nous mettons le nom de la fonction en majuscule lors du nom du constructeur afin de faciliter la distinction des fonctions ordinaires.

Forcer l'utilisation de l'opérateur new
Pour l'utilisation de l'opérateur new dans le constructeur, regardons le code suivant Nous pouvons forcer l'utilisation de l'opérateur new en jugeant si l'instance de this. la valeur est PersonBir pour atteindre l'objectif.

function PersonBir(name, year, month) {
    //核心代码，如果为假，就创建一个新的实例返回。
    if(!(this instanceof PersonBir)){        return new PersonBir(name, year, month);
    }    this.month = month;    this.year = year;    this.name = name；
}
PersonBir.prototype.output=function(){
     return this.name + ":" + this.year +"年"+ this.month+"月";
}var ming= new PersonBir("小明", 1998, 5);var gang= new PersonBir("小刚", 2000, 4);
console.log(ming.output());
console.log(gang.output());

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

modèle de conception js - utilisation du modèle singleton

Pourquoi le front-end devrait-il utiliser la modularité ?

Solutions aux problèmes courants de compatibilité CSS

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!