Maison > interface Web > js tutoriel > Quels sont les modes de création d'objets ?

Quels sont les modes de création d'objets ?

零下一度
Libérer: 2017-06-26 11:29:27
original
1519 Les gens l'ont consulté

1 new Object()

Créez d'abord une instance d'objet, puis ajoutez-y des propriétés et des méthodes

var Person = new Object()
Person.name = 'hl'
Person.sayName = function () {
  console.log(this.name)
}
Copier après la connexion

2 Méthode littérale d'objet

Littéral d'objet Ceci La méthode est le moyen le plus rapide et le plus pratique de créer des objets et est utilisée dans de nombreux scénarios.

var Person = {
  name: 'hl',
  sayName: function () {
    console.log(this.name)
  }
}
Copier après la connexion

L'inconvénient de la méthode littérale d'objet est que lors de la création de plusieurs objets du même type, beaucoup de code en double sera généré, d'où le modèle d'usine.

3 Modèle d'usine

Le modèle d'usine utilise des fonctions pour encapsuler les détails de la création d'objets. Lors de l'appel de la fonction, transmettez les propriétés de l'objet, puis renvoyez un objet.

function createPerson (name) {
  return {
    name: name,
    sayName: function () {
      console.log(this.name)
    }
  }
}
var person = createPerson('hl')
var person = new createPerson('hl') // 寄生构造函数模式
Copier après la connexion

Le même résultat peut également être obtenu en utilisant l'opérateur new. Cette méthode est appelée modèle de constructeur parasite, et (ne devrait pas) être différente de l'appel direct de la fonction.
Bien que le modèle d'usine résolve le problème de la création de plusieurs objets du même type, il ne peut pas identifier le type spécifique de l'objet.

4 Modèle de constructeur

Pour les objets créés via le constructeur, l'opérateur instanceof peut être utilisé pour déterminer le type de l'objet. Selon les conventions de programmation, les noms de constructeur doivent être en majuscules pour les distinguer des fonctions ordinaires.

function Person (name) {
  this.name = name
  this.sayName = function () {
    console.log(this.name)
  }
}
p = new Person('hl')
p instanceof Person // true
Copier après la connexion

Caractéristiques du constructeur :

  • Aucun objet créé affiché

  • Les attributs et méthodes lui sont directement affectés

  • Il n'y a pas d'instruction return

  • Utilisez l'opérateur new pour créer un objet

Le L'inconvénient du constructeur est que chaque méthode sera recréée sur chaque instance, provoquant un gaspillage de mémoire.

5 Mode Prototype

En utilisant le mode prototype, vous pouvez facilement ajouter des propriétés et des méthodes aux objets.

function Person () {
}
var p = new Person()
Person.prototype.name = 'hl'
Person.prototype.sayName = function () {
  console.log(this.name)
}
p.sayName() // hl
Copier après la connexion

Le prototype est dynamique, c'est-à-dire que l'objet est d'abord créé puis le prototype est modifié, et l'instance peut également obtenir les propriétés et méthodes correspondantes.
Le mode prototype n'est pas sans défauts. Premièrement, le mode prototype ne peut pas transmettre les paramètres d'initialisation, ce qui fait que chaque instance obtient les mêmes propriétés. Deuxièmement, pour les valeurs de type référence, toutes les instances font référence au même objet, voir ci-dessous Exemple :

function Person () {
}
Person.prototype.relative = ['father','mother']

var person1 = new Person()
var person2 = new Person()
person1.relative.push('sister')
console.log(person2.relative) // [ 'father', 'mother', 'sister' ]
Copier après la connexion

Modifiez les attributs de personne1, et les attributs de personne2 sont également modifiés. Les instances doivent généralement avoir leurs propres propriétés, de sorte que le modèle prototype est rarement utilisé seul.

6 Utilisez le modèle constructeur et le modèle prototype en combinaison

La façon la plus courante de créer des objets est d'utiliser le modèle constructeur et le modèle prototype en combinaison. Les constructeurs sont utilisés pour les propriétés personnalisées et les modèles de prototypes sont utilisés pour définir les propriétés et méthodes partagées.

function Person (name) {
  this.name = name
}
Person.prototype.sayName = function () {
  console.log(this.name)
}
Copier après la connexion

7 modèles de prototypes dynamiques

Les prototypes peuvent être initialisés dans le constructeur pour mieux encapsuler le processus de création d'objet.

function Person(name) {
  this.name = name
  if (typeof this.sayName !== 'function') {
    Person.prototype.setName= function (name) {
      this.name = name
    }
    Person.prototype.sayName = function () {
      console.log(this.name)
    }
  }
}
Copier après la connexion

Vous n'êtes pas obligé d'utiliser if pour vérifier chaque propriété ou méthode, il vous suffit de vérifier l'une des propriétés ou méthodes qui devraient exister après l'initialisation du prototype.

8 Modèle de constructeur sécurisé

Un objet sûr signifie qu'il n'a pas de propriétés publiques, que ses propriétés et méthodes ne font pas référence à cet objet et que l'opérateur new n'est pas utilisé pour créer des objets. Convient pour une utilisation dans certains environnements qui nécessitent une sécurité pour empêcher la modification des données.

function Person (name) {
  return {
    sayName: function () {
      console.log(name)
    }
  }
}
var person = Person('hl')
Copier après la connexion

Les objets créés en mode sans échec n'ont aucun moyen de modifier ou d'accéder aux données d'origine transmises dans le constructeur, sauf en utilisant les méthodes définies dans le constructeur.

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