Tutoriel d'utilisation des objets JSprototype

Cette fois, je vais vous apporter un tutoriel sur la façon d'utiliser l'objet JSprototype. Quelles sont les précautions lors de l'utilisation de l'objet JSprototype. Ce qui suit est un cas pratique, jetons un coup d'œil.

Nous avons résolu le problème du partage de méthodes entre plusieurs instances via le prototype. Ensuite, nous découvrirons les tenants et les aboutissants du prototype et de la chaîne de prototypes.

function CreateObj(uName) {
   this.userName = uName;
  }
  CreateObj.prototype.showUserName = function(){
   return this.userName;
  }
  var obj1 = new CreateObj('ghostwu');
  var obj2 = new CreateObj('卫庄');

1. Chaque fonction possède un attribut prototype (prototype). Cet attribut est un pointeur pointant vers l'objet prototype (CreateObj.prototype) du constructeur , comme indiqué dans le photo ci-dessus. La première ligne verte

2. Par défaut, tous les objets prototypes obtiendront automatiquement un attribut constructeur. La fonction de cet attribut a été expliquée ci-dessus. Cet attribut contient une fonction pointant vers l'attribut prototype, comme la deuxième ligne verte

3. Toutes les instances (créées via le constructeur new, les objets prototypes [tels que CreateObj.prototype, je n'ai pas dessiné l'image ci-dessus], etc.) contiennent un prototype implicite (proto), qui pointe vers Objet prototype du constructeur de l'instance,

Comme le montrent les troisième et quatrième lignes de l'image ci-dessus. Le constructeur de obj1 est CreateObj, et l'objet prototype de CreateObj est CreateObj.prototype. La même chose est vraie pour obj2, donc :

. obj1.proto === CreateObj.prototype //true

obj2.proto === CreateObj.prototype //true

4. Écrivez dans le constructeur les attributs et méthodes qui lui attribuent une valeur. Pendant le processus de dessin, dessinez-les sur l'objet. Par exemple, userName est un attribut attribué à l'objet, donc dans obj1. et obj2 Il y aura un attribut userName

sur les deux objets. 5. Les méthodes ou attributs écrits sur l'objet prototype doivent être dessinés sur l'objet prototype, tels que

CreateObj.prototype.showUserName = function(){
return this.userName;
}

La méthode showUserName doit être dessinée au-dessus de CreateObj.prototype dans l'image

6. Lorsqu'un objet accède à des propriétés et des méthodes, ses règles d'accès sont appelées (principe de proximité). Les règles sont les suivantes :

. Lorsqu'il y a des attributs ou des méthodes sur l'instance, utilisez-les directement,

S'il n'y a pas de propriétés ou de méthodes sur l'instance, la recherche se poursuivra le long de l'objet prototype pointé par le proto-pointeur de l'instance. S'il est introuvable, la valeur sera indéfinie.

console.log( obj1.showUserName() ); //ghostwu
console.log( obj2.showUserName() ); //卫庄

. La méthode showUserName n'existe pas sur obj1 et obj2, vous suivrez donc le proto pour trouver la méthode showUserName

sur l'objet prototype CreateObj.prototype. Si vous commentez showUserName sur l'objet prototype CreateObj.prototype, alors obj1.showUserName et obj2.showUserName signaleront les erreurs

// CreateObj.prototype.showUserName = function(){
// return this.userName;
// }

function CreateObj(uName) {
   this.userName = uName;
   this.showUserName = function(){
    return '100';
   }
  }
  CreateObj.prototype.showUserName = function(){
   return this.userName;
  }
  var obj1 = new CreateObj('ghostwu');
  var obj2 = new CreateObj('卫庄');
  console.log( obj1.showUserName() ); //100
  console.log( obj2.showUserName() ); //100

Si vous ajoutez une méthode showUserName à ceci dans le constructeur, alors obj1 et obj2 l'appelleront directement, car ces deux méthodes seront dessinées sur l'instance dans l'image, donc :

console.log( obj1.showUserName === obj2.showUserName ); //false

Maintenant, vous devriez pouvoir comprendre le principe du partage des attributs et des méthodes de plusieurs instances en les écrivant sur l'objet prototype du constructeur

Qu'est-ce qu'une chaîne prototype ?

Plus tôt, j'ai dit que toutes les instances (y compris les objets prototypes) avaient un prototype de prototype implicite, alors vers qui pointe l'objet prototype de CreateObj.prototype ?

function CreateObj(uName) {
   this.userName = uName;
   this.showUserName = function () {
    return '100';
   }
  }
  CreateObj.prototype.showUserName = function () {
   return this.userName;
  }
  console.log( CreateObj.prototype.proto ); //指向Object.prototype
  console.log( CreateObj.prototype.proto === Object.prototype ); //true

CreateObj.prototype.proto pointe vers Object.prototype, ce qui est vrai après avoir testé via l'opérateur congruent

(===) Object.prototype.proto pointe vers NULL

Il s'agit de la chaîne de prototypes. Certains constructeurs sont enchaînés couche par couche via des prototypes implicites. À partir de l'image ci-dessus, vous pouvez voir pourquoi les objets personnalisés peuvent appeler des méthodes toString, valueOf, etc.

Parce que tous les objets sont hérités d'Object.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

react-router4.0 implémente la redirection et les fonctions 404

étapes js pour définir le style des éléments détaillé explication

Résumé de la méthode de tri de l'implémentation JS

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!