Une compréhension approfondie des nombreuses façons dont JavaScript crée des objets, ainsi que de leurs avantages et inconvénients.

Cet article présente principalement les différentes manières, avantages et inconvénients de JavaScript pour créer des objets Il présente principalement 5 façons pour ceux qui sont intéressés d'apprendre. plus Suivant

Écrit devant

Cet article explique différentes façons de créer des objets, ainsi que leurs avantages et inconvénients.

Mais attention :

Cet article ressemble plus à une note, car "JavaScript Advanced Programming" est si bien écrit !

1. Modèle d'usine

function createPerson(name) {
  var o = new Object();
  o.name = name;
  o.getName = function () {
    console.log(this.name);
  };

  return o;
}

var person1 = createPerson('kevin');

Inconvénients : L'objet ne peut pas être reconnu car toutes les instances pointent vers un prototype

2. ConstructeurModèle

function Person(name) {
  this.name = name;
  this.getName = function () {
    console.log(this.name);
  };
}

var person1 = new Person('kevin');

Avantages : Les instances peuvent être identifiées comme un type spécifique

Inconvénients : Chaque fois qu'une instance est créée , chaque méthode doit être créée une fois

2.1 Optimisation du modèle de constructeur

function Person(name) {
  this.name = name;
  this.getName = getName;
}

function getName() {
  console.log(this.name);
}

var person1 = new Person('kevin');

Avantages : Résoudre le problème de chaque méthode devant être recréée

Inconvénients : Comment s'appelle l'encapsulation...

3 Mode prototype

function Person(name) {

}

Person.prototype.name = 'keivn';
Person.prototype.getName = function () {
  console.log(this.name);
};

var person1 = new Person();

Avantages : La méthode ne sera pas recréée. Créer des

Inconvénients : 1. Toutes les propriétés et méthodes sont partagées 2. Impossible d'initialiser les paramètres

3.1 Optimisation du mode prototype

function Person(name) {

}

Person.prototype = {
  name: 'kevin',
  getName: function () {
    console.log(this.name);
  }
};

var person1 = new Person();

Avantages : meilleure encapsulation

Inconvénients : réécriture du prototype et perte de l'attribut constructeur

3.2 Optimisation du mode prototype

function Person(name) {

}

Person.prototype = {
  constructor: Person,
  name: 'kevin',
  getName: function () {
    console.log(this.name);
  }
};

var person1 = new Person();

Avantages : L'instance peut trouver son constructeur grâce à l'attribut constructor

Inconvénients : Le mode prototype présente toujours les inconvénients

4 Mode composition

.

Le modèle constructeur et le modèle prototype sont deux épées en une.

function Person(name) {
  this.name = name;
}

Person.prototype = {
  constructor: Person,
  getName: function () {
    console.log(this.name);
  }
};

var person1 = new Person();

Avantages : partage partagé, privé privé, la méthode la plus largement utilisée

Inconvénients : certaines personnes veulent simplement tout écrire ensemble, c'est-à-dire de meilleures propriétés d'encapsulation

4.1 Mode prototype dynamique

function Person(name) {
  this.name = name;
  if (typeof this.getName != "function") {
    Person.prototype.getName = function () {
      console.log(this.name);
    }
  }
}

var person1 = new Person();

Remarque : lorsque vous utilisez le mode prototype dynamique, vous ne pouvez pas remplacer le prototype par des littéraux d'objet

Explication Pourquoi :

function Person(name) {
  this.name = name;
  if (typeof this.getName != "function") {
    Person.prototype = {
      constructor: Person,
      getName: function () {
        console.log(this.name);
      }
    }
  }
}
 
var person1 = new Person('kevin');
var person2 = new Person('daisy');
 
// 报错 并没有该方法
person1.getName();
 
// 注释掉上面的代码，这句是可以执行的。
person2.getName();

Pour expliquer ce problème, supposons que var person1 = new Person('kevin') soit démarré.

Si vous n'êtes pas très familier avec le processus d'exécution sous-jacent de new and post, vous pouvez lire les articles dans les liens connexes en bas.

Passons en revue les étapes d'implémentation de new :

1. Créez d'abord un nouvel objet

2. puis pointez le prototype de l'objet vers Person prototype

3. Puis Person.apply(obj)

4. renvoie cet objet

Note cette fois, passez en revue les étapes d'implémentation de apply. La méthode obj.Person sera exécutée à ce moment-là, le contenu de l'instruction if sera exécuté. Notez que l'attribut prototype du constructeur pointe vers le prototype de l'instance. méthode littérale pour remplacer directement Person.prototype. La valeur du prototype de l'instance sera modifiée. person1 pointe toujours vers le prototype précédent, pas vers Person.prototype. Le prototype précédent n'avait pas de méthode getName, donc une erreur a été signalée !

Si vous souhaitez simplement écrire du code de manière littérale, vous pouvez essayer ceci :

function Person(name) {
  this.name = name;
  if (typeof this.getName != "function") {
    Person.prototype = {
      constructor: Person,
      getName: function () {
        console.log(this.name);
      }
    }
 
    return new Person(name);
  }
}
 
var person1 = new Person('kevin');
var person2 = new Person('daisy');
 
person1.getName(); // kevin
person2.getName(); // daisy

5.1 Modèle de constructeur parasite

function Person(name) {
 
  var o = new Object();
  o.name = name;
  o.getName = function () {
    console.log(this.name);
  };
 
  return o;
 
}
 
var person1 = new Person('kevin');
console.log(person1 instanceof Person) // false
console.log(person1 instanceof Object) // true

Modèle de constructeur parasite, je pense personnellement qu'il faut le lire comme ceci :

Modèle de constructeur parasite, c'est-à-dire, parasite dans Une méthode de constructeur.

En d'autres termes, sous le couvert d'un constructeur, vous essayez de vendre quelque chose comme un mouton sur la tête de quelqu'un d'autre. Vous voyez, l'instance créée à l'aide de instanceof ne peut pas pointer vers le constructeur !

Cette méthode peut être utilisée dans des circonstances particulières. Par exemple, si nous voulons créer un Array spécial avec des méthodes supplémentaires, mais que nous ne voulons pas modifier directement le constructeur Array, nous pouvons écrire comme ceci :

function SpecialArray() {
  var values = new Array();
 
  for (var i = 0, len = arguments.length; i len; i++) {
    values.push(arguments[i]);
  }
 
  values.toPipedString = function () {
    return this.join("|");
  };
  return values;
}
 
var colors = new SpecialArray('red', 'blue', 'green');
var colors2 = SpecialArray('red2', 'blue2', 'green2');
 
 
console.log(colors);
console.log(colors.toPipedString()); // red|blue|green
 
console.log(colors2);
console.log(colors2.toPipedString()); // red2|blue2|green2

Vous constaterez que le modèle de constructeur dit parasite utilise un nouveau modèle de plus lors de la création d'objets que le modèle d'usine. En fait, les résultats des deux sont les mêmes.

Mais l'auteur peut espérer utiliser SpecialArray comme un Array normal. Bien que SpecialArray puisse être utilisé comme fonction, ce n'est pas l'intention de l'auteur et cela devient inélégant.

N'utilisez pas ce mode lorsque d'autres modes peuvent être utilisés.

Mais il convient de mentionner que la boucle dans l'exemple ci-dessus :

for (var i = 0, len = arguments.length; i len; i++) {
  values.push(arguments[i]);
}

peut être remplacée par :

values.push.apply(values, arguments);

5.2 Modèle de constructeur stable

function person(name){
  var o = new Object();
  o.sayName = function(){
    console.log(name);
  };
  return o;
}

var person1 = person('kevin');

person1.sayName(); // kevin

person1.name = "daisy";

person1.sayName(); // kevin

console.log(person1.name); // daisy

L'objet dit sûr fait référence à C'est un objet qui n'a pas de propriétés publiques et ses méthodes ne référence ceci.

Il existe deux différences par rapport au modèle de constructeur parasite :

1. La méthode d'instance nouvellement créée ne fait pas référence à ceci

2. N'utilise pas new L'opérateurappelle le constructeur

Les objets sûrs sont mieux adaptés dans certains environnements sûrs.

Le modèle de constructeur sécurisé est le même que le modèle d'usine et ne peut pas identifier le type de l'objet.

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!