Explication détaillée de la façon dont les objets JavaScript sont créés et du code de modèle de constructeur

Les connaissances orientées objet javascript sont très étendues, et il faut un certain temps pour les comprendre en profondeur

Création d'objets :

1 Créer un orienté objet

var obj = new Object(); 
obj.name = 'haha';
obj.showName = function(){ 
 alert(obj.name);
}
obj.showName();

Inconvénients : Lorsque l'on veut créer plusieurs objets orientés objet, il y a trop de code répétitif et il faut l'encapsuler, nous avons donc une méthode d'usine.

2 Méthode Factory

function CreatePerson(name){ 
 var obj = new Object(); //原料
 obj.name = name;   //加工
 obj.showName = function(){
  alert(this.name);
 } 
 return obj;//出厂
}
var p1 = CreatePerson('haha');
p1.showName();
var p2 = CreatePerson('hehe');
p2.showName();
//其实就是简单的封装函数，整个过程像工厂的流水线，所以叫工厂方式

Inconvénients : Impossible d'identifier le type d'objet créé. Parce qu'ils sont tous des objets, il n'y a pas de distinction, contrairement à Date, Array, etc., c'est pourquoi le modèle de constructeur a émergé.

3 Modèle de constructeur

function CreatePerson(name){ 
 this.name = name; 
 this.showName = function(){ 
  alert(this.name);
 } 
} 
var p1 =new CreatePerson('haha'); 
p1.showName();
var p2 = new CreatePerson('hehe'); 
p2.showName();

On change à travers ces deux aspects :

Le la première lettre du nom de la fonction est en majuscule

C'est pour la distinguer des fonctions ordinaires. Le constructeur lui-même est en fait une fonction ordinaire, mais nous l'utilisons spécifiquement pour implémenter la fonction de construction, nous l'avons donc. spécialement Un nom est appelé un constructeur. Toute fonction peut devenir un constructeur, selon la façon dont vous appelez la fonction. Lorsqu'elle est appelée à l'aide de New, elle devient un constructeur.

Appel du nouveau mot-clé

Le mot-clé New est utilisé lors de l'appel de la fonction, alors que fait exactement New ? Quelle est la différence entre utiliser New ou non ? En regardant l'exemple suivant

function CreatePerson(name){
 this.name = name;
 this.showName = function(){
  alert(this.name); 
 }; 
 console.log(this);
} 
new CreatePerson('haha'); //CreatePerson
CreatePerson('haha'); //window

, nous constaterons que lors de l'utilisation de New pour appeler une fonction, le but sera différent. En fait, New fait principalement les choses suivantes, mais ce qui est écrit ci-dessous n'est qu'un comportement général, pas le code source interne.

function CreatePerson(name){ 
 var obj = {}; //声明一个空对象obj 
 obj._proto_= CreatePerson.prototype;
 //把这个对象的_proto_属性指向构造函数的原型对象,这样obj就可以调用CreatePerson原型对象下的所有方法 ，这里原型先知道结论，下面会讲。
 CreatePerson.apply(obj); //用apply方法让this指向obj对象
 this.name = name; //obj对象添加属性，方法
 this.showName = function(){ 
  alert(this.name);
  }; 
 return obj;//返回这个对象
}

Problèmes avec le modèle de construction de fonction :

alert(p1.showName==p2.showName);//false

Inconvénients : Ces deux objets sont visibles Ils ne partagent pas la même méthode : à chaque utilisation de new, le système va créer une nouvelle mémoire. Chacun de ces deux objets a son propre territoire, mais ils ont la même fonction et ne sont pas partagés, ce qui n'est certainement pas ce que nous souhaitons. . Il y a donc la méthode suivante, prototype + mode construction

4 Prototype + mode construction

Prototype : Chaque fonction possède un attribut prototype, qui est un Objet, également appelé un objet prototype, nous pouvons y écrire des méthodes et des propriétés (mais l'objet prototype a non seulement les propriétés et méthodes que nous avons écrites, mais aussi d'autres, qui seront présentées ci-dessous), et l'instance créée via cette fonction. Les objets peuvent partager les méthodes et les propriétés de cet objet prototype. Il nous suffit donc de placer les éléments que nous voulons partager sous le prototype de la fonction, et les éléments que nous ne voulons pas partager peuvent être créés via le constructeur.
Regardez un châtaignier (prototype + construction)

function CreatePerson(name){ 
 this.name = name;
}
CreatePerson.prototype.showName = function(){ 
 alert(this.name);
}
var p1 =new CreatePerson('haha');
p1.showName();
var p2 = new CreatePerson('hehe');
p2.showName();
alert(p1.showName==p2.showName);//true

Le test est vrai, on voit que la méthode showName() est partagée. , ce qui signifie qu'ils sont partagés. Une mémoire, de plus, ils ont une relation de référence, ce qui signifie que si vous modifiez le showName de p1, cela affectera également le showName de p2.

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!