Compréhension approfondie des constructeurs javascript et des prototypes d'objets

Compréhension approfondie des constructeurs javascript et des prototypes d'objets_javascript

WBOY

Libérer： 2016-05-16 16:35:50

original

1161 Les gens l'ont consulté

Plusieurs modes de création d'objets couramment utilisés

Créez en utilisant le nouveau mot-clé
La méthode la plus basique de création d’objets n’est rien de plus que la même que dans la plupart des autres langages : il n’y a pas d’objet, vous en créez un nouveau !

var gf = new Object();
gf.name = "tangwei";
gf.bar = "c++";
gf.sayWhat = function() {
  console.log(this.name + "said:love you forever");
}

Copier après la connexion

Créer en utilisant des littéraux

Cela semble approprié, mais comment les geeks peuvent-ils aimer une manière aussi compliquée et discrète de définir des variables ? En tant que langage de script, il devrait avoir le même style que les autres frères, ainsi est-il apparu comment les littéraux d'objet sont définis : <. 🎜>

var gf = {
  name : "tangwei",
  bar : "c++",
  sayWhat : function() {
    console.log(this.name + "said:love you forever");
  }
}

Copier après la connexion

Mode usine

En fait, c'est la manière la plus couramment utilisée pour définir des objets dans la pratique, mais que dois-je faire si je veux avoir de nombreux objets avec des propriétés similaires (y penser est passionnant...) ? Si nous les définissons un par un, beaucoup de code sera généré. Pourquoi ne pas construire une usine et produire nos objets par lots ? D'où le premier bébé gonflable du monde JavaScript ? . . Non, le « modèle usine » était né !

function createGf(name, bar) {
  var o = new Object();
  o.name = name;
  o.bar = bar;
  o.sayWhat = function() {
    alert(this.name + "said:love you forever");
  }
  return o;
}
var gf1 = createGf("bingbing","d");
var gf2 = createGf("mimi","a");

Copier après la connexion

Constructeur

Le modèle d'usine résout le problème de la création de plusieurs objets similaires, mais le problème revient. Ces objets sont tous créés à partir d'Object. Comment distinguer leurs types d'objet spécifiques ? A ce moment nous devons passer à un autre mode, le mode constructeur :

function Gf(name,bar){
  this.name = name;
  this.bar = bar;
  this.sayWhat = function(){
    alert(this.name + "said:love you forever");
  }
}
var gf1 = new Gf("vivian","f");
var gf2 = new Gf("vivian2","f");

Copier après la connexion

Ici, nous utilisons un constructeur commençant par une majuscule pour remplacer createGf dans l'exemple ci-dessus. Notez que selon la convention, la première lettre du constructeur doit être en majuscule. Ici, nous créons un nouvel objet, puis attribuons la portée du constructeur au nouvel objet et appelons les méthodes dans le constructeur.

Il ne semble y avoir aucun problème avec la méthode ci-dessus, mais nous pouvons constater que la méthode sayWhat dans le constructeur appelé dans les deux instances n'est pas la même instance de fonction :

console.log(gf1.sayWhat == gf2.sayWhat); //false

Copier après la connexion

Appeler la même méthode mais déclarer des instances différentes est un gaspillage de ressources. On peut optimiser et déclarer la fonction sayWhat en dehors du constructeur :

function Gf(name,bar){
  this.name = name;
  this.bar = bar;
  this.sayWhat = sayWhat
}
function sayWhat(){
  alert(this.name + "said:love you forever");
}

Copier après la connexion

Cela résout le problème de plusieurs instances définissant la même instance de méthode plusieurs fois, mais un nouveau problème surgit. La méthode sayWhat que nous avons définie est une méthode de portée globale, mais cette méthode ne peut pas être appelée directement. C'est un peu contradictoire. Comment définir plus élégamment un objet avec certaines propriétés d'encapsulation ? Jetons un coup d'œil au modèle d'objet prototype JavaScript.

Modèle d'objet prototype

Comprendre les objets prototypes

Lorsque nous créons une fonction, la fonction aura un attribut prototype, qui pointe vers l'objet prototype de la fonction créée via le constructeur. En termes simples, un objet prototype est un objet en mémoire qui fournit des propriétés et des méthodes partagées pour d'autres objets.

En mode prototype, il n'est pas nécessaire de définir les attributs de l'instance dans le constructeur, et les informations sur les attributs peuvent être directement affectées à l'objet prototype :

function Gf(){
  Gf.prototype.name = "vivian";
  Gf.prototype.bar = "c++";
  Gf.prototype.sayWhat = function(){
    alert(this.name + "said:love you forever");
  }
}
var gf1 = new Gf();
gf1.sayWhat();
var gf2 = new Gf();

Copier après la connexion

La différence avec le constructeur est que les propriétés et méthodes du nouvel objet peuvent ici être partagées par toutes les instances. En d'autres termes, gf1 et gf2 accèdent aux mêmes propriétés et méthodes. En plus des attributs que nous attribuons à l'objet prototype, il existe également des attributs intégrés. Tous les objets prototypes ont un attribut constructeur, qui est un pointeur vers une fonction contenant l'attribut prototype (osez aller plus loin !). Comprenons clairement ce processus de torsion de langue à travers une image :

Tous les objets ont un objet prototype (prototype). L'objet prototype a un attribut constructeur pointant vers la fonction contenant l'attribut prototype. Les instances Gf gf1 et gf2 contiennent toutes deux un attribut interne pointant vers l'objet prototype (affiché dans le navigateur Firefox). est un proto de propriété privée), lorsque nous accédons à une propriété dans un objet, nous demanderons d'abord si la propriété existe dans l'objet instance, et sinon, continuerons à chercher l'objet prototype.

Utiliser des objets prototypes
Dans l'exemple précédent, nous avons remarqué que lors de l'ajout d'attributs aux objets prototypes, nous devons ajouter Gf.prototype à chacun d'entre eux. Ce travail est très répétitif. Dans le mode de création d'objet ci-dessus, nous savons que nous pouvons utiliser des littéraux dans. la forme de Créer un objet, on peut aussi l'améliorer ici :

function Gf(){}
Gf.prototype = {
  name : "vivian",
  bar : "c++",
  sayWhat : function(){
    alert(this.name + "said:love you forever");
  }
}

Copier après la connexion

Il y a une chose qui nécessite une attention particulière ici. L'attribut constructeur ne pointe plus vers l'objet Gf, car chaque fois qu'une fonction est définie, un objet prototype sera également créé pour elle en même temps. obtenir un nouvel attribut de constructeur. C'est Nous utilisons Gf.prototype pour écraser essentiellement l'objet prototype d'origine, de sorte que le constructeur devient la propriété de constructeur du nouvel objet, ne pointant plus vers Gf, mais vers Object :

var gf1 = new Gf();
console.log(gf1.constructor == Gf);//false
console.log(gf1.constructor == Object)//true

Copier après la connexion

一般情况下，这个微妙的改变是不会对我们造成影响的，但如果你对constructor有特殊的需求，我们也可以显式的指定下Gf.prototype的constructor属性：

Gf.prototype = {
  constructor : Gf,
  name : "vivian",
  bar : "c++",
  sayWhat : function() {
    alert(this.name + "said:love you forever");
  }
}
var gf1 = new Gf();
console.log(gf1.constructor == Gf);//true

Copier après la connexion

通过对原型对象模式的初步了解，我们发现所有的实例对象都共享相同的属性，这是原型模式的基本特点，但往往对于开发者来说这是把“双刃剑”，在实际开发中，我们希望的实例应该是具备自己的属性，这也是在实际开发中很少有人单独使用原型模式的主要原因。

构造函数和原型组合模式

在实际开发中，我们可以使用构造函数来定义对象的属性，使用原型来定义共享的属性和方法，这样我们就可以传递不同的参数来创建出不同的对象，同时又拥有了共享的方法和属性。

function Gf(name,bar){
  this.name = name;
  this.bar = bar;
}
Gf.prototype = {
  constructor : Gf,
  sayWhat : function() {
    alert(this.name + "said:love you forever");
  }
}
var gf1 = new Gf("vivian", "f");
var gf2 = new Gf("vivian1", "c");

Copier après la connexion

在这个例子中，我们再构造函数中定义了对象各自的属性值，在原型对象中定义了constructor属性和sayWhat函数，这样gf1和gf2属性之间就不会产生影响了。这种模式也是实际开发中最常用的对象定义方式，包括很多js库（bootstrap等）默认的采用的模式。