Préface
Il existe de nombreuses façons de créer des objets à l'aide de JavaScript. Maintenant, énumérons quatre d'entre eux et énumérons les avantages et les inconvénients de chaque méthode, afin que vous puissiez le choisir et l'utiliser. Jetons un coup d'œil.
Modèle d'usine
fonction createSerson (name, age) {var obj = new object (); obj.name = name; obj.age = âge; retour obj; // Assurez-vous de revenir, autrement indéfini: Undefined} var person1 = new CreateSerson ('Young', 18); console.log (Person1.name + ':' + Person1.age);Avantages: le modèle d'usine peut résoudre le problème de la création de plusieurs objets similaires
Inconvénients: le problème de reconnaissance des objets n'a pas été résolu (comment déterminer le type d'un objet)
Mode constructeur
Fonction Person (nom, âge) {this.name = name; this.age = âge; } var person1 = new Person ('Young', 18); console.log (Person1.name + ':' + Person1.age);Avant de parler de ses avantages et des inconvénients, parlons d'abord de sa propre histoire.
Utiliser les constructeurs comme fonctions
Fonction Person (nom, âge) {this.name = name; this.age = âge; this.sayName = function () {return this.name; }} // Utiliser var person1 = new Person ('Young', 18); personne1.sayName (); console.log (Person1.name + ':' + Person1.age); // Personne d'appel («vent», 18); console.log (window.sayName ()); // appelle var obj = new object (); Personne.Call (obj, «oiseau», 100); console.log (obj.sayName ());Avantages et inconvénients des constructeurs
Avantages: son instance peut être identifiée comme un type spécifique
Inconvénients: chaque méthode doit être recréée sur chaque instance. Bien sûr, vous pouvez le changer comme ceci:
Fonction Person (nom, âge) {this.name = name; this.age = âge; this.sayName = SayName; } fonction saitName () {return this.name; }Au lieu de cela, appelez les fonctions globales, il n'y a donc pas d'encapsulation. . . Le mode prototype suivant peut compenser cette lacune
Mode prototype
fonction personne () {} personne.prototype.name = 'young'; Personne.prototype.age = 18; Personne.prototype.sayName = function () {return this.name; } var person1 = new Person (); console.log (Person1.SayName ()); var person2 = new personne (); console.log (Person1.SayName ()); alert (Person1.sayName === Person2.SayName); // Person1 et Person2 accèdent à la même fonction SayName () du même groupe d'attributsBien que la valeur enregistrée dans le prototype soit accessible via l'instance de l'objet, la valeur stockée dans le prototype ne peut pas être réincarrée via l'objet d'instance
fonction personne () {} personne.prototype.name = 'young'; Personne.prototype.age = 18; Personne.prototype.sayName = function () {return this.name; } var person1 = new Person (); var person2 = new personne (); Person1.name = 'Wind'; console.log (Person1.sayName ()); // Wind Console.log (Person2.SayName ()); // Young Alert (Person1.sayName == Person2.SayName); // True Lorsque nous appelons person1.sayName , nous effectuerons deux recherches successives. L'analyseur détermine d'abord si l'instance Person1 a l'attribut sayName . S'il y en a, nous appellerons nos propres attributs. S'il n'y a pas, nous rechercherons les attributs du prototype.
fonction personne () {} personne.prototype.name = 'young'; Personne.prototype.age = 18; Personne.prototype.sayName = function () {return this.name; } var person1 = new Person (); var person2 = new personne (); Person1.name = 'Wind'; Console.log (Person1.SayName ()); // Wind Console.log (Person2.SayName ()); // Young Delete Person1.name; Console.log (Person1.SayName ()); // Young Console.log (Person2.SayName ()); // Young Utilisez la méthode hasOwnPropertyType pour détecter si une propriété existe dans le prototype ou dans l'instance. La méthode est héritée de l'objet, vrai dans l'instance et false dans le prototype.
Utilisez Object.keys() pour énumérer les propriétés d'instance sur les objets
fonction personne () {} personne.prototype.name = 'young'; Personne.prototype.age = 18; Personne.prototype.sayName = function () {return this.name; } var keys = object.keys (personne.prototype); console.log (clés); // ["nom", "âge", "sayname"]Pour les avantages et les inconvénients du mode prototype
Avantages: pas besoin de réitérer chaque méthode sur chaque instance
Inconvénients: très peu de gens utilisent le mode prototype seul. . Liste des questions en détail
fonction personne () {} personne.prototype = {constructeur: personne, nom: 'jeune', Âge: 18, amis: ['Big', 'Pig'], SayName: function () {return this.name; }}; var p1 = new personne (); var p2 = new personne (); p1.friends.push ('lun'); Console.log (P1.friends); // ["Big", "Pig", "Mon"] Console.log (P2.friends); // ["Big", "Pig", "Mon"] C'est précisément parce que les instances ont généralement leurs propres attributs, et nous les placons en Person.prototype ici, donc avec la modification de P1, toute l'instance et le prototype sont modifiés. Ensuite, nous pouvons utiliser une combinaison de mode constructeur et de mode prototype.
Utilisez le mode constructeur et le mode prototype en combinaison
Fonction Person (nom, âge) {this.name = name; this.age = âge; this.friends = ['Big', 'Pig']; } Personne.prototype = {SayName: function () {return this.name; }}; var p1 = nouvelle personne («jeune», 18); var p2 = new personne («vent», 78); p1.friends.push ('raganya'); Console.log (p1.friends); // ["Big", "Pig", "Raganya"] console.log (p2.friends); // ["Big", "Pig"] console.log (p1.friends == p2.friends); // FAUX Console.log (p1.sayname == p2.Sayname); // true.log (p1.sayName == P2.SayName); // true.log (P1.SayName == P2Ce modèle est actuellement la méthode la plus utilisée et la plus reconnue pour créer des types personnalisés. est un mode par défaut utilisé pour définir les types de référence.
Résumer
Ce qui précède consiste à analyser la façon dont les objets sont créés dans JavaScript. Les quatre méthodes et leurs avantages et inconvénients ont été résumés par cet article. J'espère qu'il peut être utile pour tout le monde d'apprendre à utiliser JavaScript.