Maison > interface Web > js tutoriel > Un résumé de plusieurs façons de créer des objets en JS

Un résumé de plusieurs façons de créer des objets en JS

迷茫
Libérer: 2017-03-26 17:49:20
original
1219 Les gens l'ont consulté

J'ai lu récemment le livre JS Advanced Programming et j'ai le temps de trier plusieurs façons de créer des objets. Sans plus attendre, allons droit au but.

Premier type : Création d'un constructeur d'objet

 Person =  Object();
Copier après la connexion

Cette ligne de code crée une nouvelle instance du type référence Object, puis enregistre l'instance dans la variable Person.

Deuxième : Utiliser la notation littérale d'objet

 Person ='Nike'29
Copier après la connexion

Le littéral d'objet est une forme abrégée de définition d'objet, visant à simplifier le processus de création d'objets contenant un grand nombre de propriétés. En d'autres termes, les première et deuxième méthodes de création d'objets sont en fait les mêmes, mais la différence d'écriture est différente

Avant d'introduire la troisième méthode de création, nous devons comprendre pourquoi Utiliser d'autres méthodes pour créer des objets, c'est-à-dire , les inconvénients de la première et de la deuxième méthodes : Elles utilisent toutes les deux la même interface pour créer de nombreux objets, ce qui générera beaucoup de code en double , c'est-à-dire que si vous avez 100 objets, alors vous il faut saisir plusieurs fois le même code 100 fois . Alors, quelle méthode avons-nous pour éviter trop de code répété ? C'est-à-dire encapsuler le processus de création d'objets dans le corps de la fonction et générer directement des objets via des appels de fonction.

Troisième méthode : Utiliser le mode usine pour créer des objets

function createPerson(name,age,job){    
   var o  = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
         alert(this.name);    
    };    return o;      
}var person1 = createPerson('Nike',29,'teacher');var person2 = createPerson('Arvin',20,'student');
Copier après la connexion

Lors de l'utilisation du mode usine pour créer des objets, nous pouvons tous remarquer que dans la fonction createPerson, un objet est renvoyé. Nous ne pouvons alors pas déterminer de quel type est l’objet renvoyé. Il existe donc un quatrième mode de création d'objets.

Quatrième : Créer des objets à l'aide de constructeurs

.name =.age =.job =.sayName =  person1 =  Person('Nike',29,'teacher');
var person2 = new Person('Arvin',20,'student');
Copier après la connexion

En comparant le modèle d'usine, nous pouvons trouver les différences suivantes :

 1. Créer des objets sans affichage

 2. Attribuez directement des attributs et des méthodes à cet objet

 3. Aucune instruction de retour

 4. Le type d'objet peut enfin être reconnu. Pour détecter les types d'objets, nous devons utiliser l'opérateur instanceof pour effectuer une détection indépendante :

alert(person1 instanceof Object);//ture
alert(person1 instanceof Person);//ture
alert(person2 instanceof Object);//ture
alert(person2 instanceof Object);//ture
Copier après la connexion

En même temps, nous devons également comprendre que selon la convention, le constructeur doit toujours commencer par une majuscule lettre, les fonctions non constructeurs doivent commencer par une lettre minuscule.

Ensuite, le constructeur est vraiment simple à utiliser, mais il a aussi ses défauts :

C'est-à-dire que chaque méthode doit être recréée sur chaque instance. La méthode fait référence aux fonctions que nous avons. définir dans l'objet. Si le nombre de méthodes est important, cela occupera beaucoup de mémoire inutile. Il existe donc une cinquième façon de créer des objets

La cinquième façon : Mode objet de création de prototype

function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
     alert(this.name);
};var person1 = new Person();
person1.sayName();
Copier après la connexion

L'utilisation de prototypes pour créer des objets peut créer tous les objets. Une instance partage les propriétés et les méthodes qu'il contient.

Si vous utilisez un prototype pour créer le mode objet, veuillez consulter le code suivant :

function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
     alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name ='Greg';
alert(person1.name);  //'Greg'  --来自实例
alert(person2.name);  //'Nike'   --来自原型
Copier après la connexion

Lors de l'ajout d'une propriété à une instance d'objet, cette propriété protégera le Objet prototype Propriétés du même nom enregistrées dans .

À l'heure actuelle, nous pouvons utiliser la combinaison du modèle de constructeur et du modèle de prototype. Le modèle de constructeur est utilisé pour définir les attributs d'instance, tandis que le modèle de prototype est utilisé pour définir les méthodes et les attributs partagés

Huitième. Type : Utiliser une combinaison de modèle de constructeur et de modèle de prototype

function Person(name,age,job){    
    this.name =name;    
    this.age = age;    
    this.job = job;
}

Person.prototype = {
    constructor:Person,
    sayName: function(){
        alert(this.name);
    };
}var person1 = new Person('Nike',20,'teacher');
Copier après la connexion

Voici les huit façons ci-dessus que j'ai résumées pour créer des objets. S'il y a des erreurs, veuillez les signaler.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal