Explication détaillée des étapes d'utilisation des objets prototypes js

Cette fois, je vais vous apporter une explication détaillée des étapes d'utilisation des objets prototypes js , et quelles sont les précautions d'utilisation des objets prototypes js. Ce qui suit est un cas pratique. . Jetons un coup d'oeil.

Commençons par un simple constructeur + applet d'objet prototype

function CreateObj( uName, uAge ) {
      this.userName = uName;
      this.userAge = uAge;
    }
    CreateObj.prototype.showUserName = function () {
      return this.userName;
    }
    CreateObj.prototype.showUserAge = function () {
      return this.userAge;
    }

Il n'y a rien de mal avec ce programme, mais il est très redondant. Chaque fois qu'une méthode est étendue, un objet prototype doit être écrit. Nous pouvons traiter l'objet prototype comme un objet littéral, et toutes les méthodes sont au format littéral. objet. Extension, peut obtenir le même effet :

CreateObj.prototype = {
      showUserAge : function(){
        return this.userAge;
      },
      showUserName : function(){
        return this.userName;
      },
    }
    var obj1 = new CreateObj( 'ghostwu', 22 );
    var obj2 = new CreateObj( '卫庄', 24 );
    console.log( obj1.showUserName(), obj1.showUserAge() ); //ghostwu 22
    console.log( obj2.showUserName(), obj2.showUserAge() ); //卫庄 24

Cependant, cette façon d'écrire l'objet prototype réécrit l'objet prototype par défaut de CreateObj. Le premier problème causé est que le constructeur ne pointe plus vers CreateObj.

Avant la réécriture, le constructeur pointe vers CreateObj

function CreateObj( uName, uAge ) {
      this.userName = uName;
      this.userAge = uAge;
    }
    CreateObj.prototype.showUserName = function () {
      return this.userName;
    }
    CreateObj.prototype.showUserAge = function () {
      return this.userAge;
    }
    console.log( CreateObj.prototype.constructor === CreateObj ); //true

Après réécriture, le constructeur pointe vers Objet

CreateObj.prototype = {
      showUserAge : function(){
        return this.userAge;
      },
      showUserName : function(){
        return this.userName;
      },
    }
    console.log( CreateObj.prototype.constructor === CreateObj ); //false
    console.log( CreateObj.prototype.constructor === Object ); //true

Le constructeur ne peut donc pas identifier avec précision l'objet car il sera modifié

Les programmes que nous avons écrits auparavant ont essentiellement étendu les méthodes sur l'objet prototype (prototype), puis ont instancié l'objet. Jetons un coup d'œil. Nous instancions d'abord l'objet, puis étendons la fonction sur l'objet prototype (prototype). > Les objets d’instance peuvent-ils normalement appeler des méthodes étendues ?

Il peut être appelé normalement, mais si l'objet prototype est remplacé, il ne peut pas être appelé

function CreateObj( uName, uAge ) {
      this.userName = uName;
      this.userAge = uAge;
    }
    var obj1 = new CreateObj( 'ghostwu', 22 );
    CreateObj.prototype.showUserName = function(){
      return this.userName;
    }
    console.log( obj1.showUserName() ); //ghostwu

Parce qu'après la réécriture de l'objet prototype, l'instanciation se produit avant la réécriture, donc le prototype implicite

function CreateObj( uName, uAge ) {
      this.userName = uName;
      this.userAge = uAge;
    }
    var obj1 = new CreateObj( 'ghostwu', 22 );
    CreateObj.prototype = {
      showUserName : function(){
        return this.userName;
      }
    }
    console.log( obj1.showUserName() ); //报错

proto

de l'instance ne pointera pas vers l'objet prototype remplacé, donc un autre problème ne peut pas être appelé, s'il existe un type de référence sur l'objet prototype (prototype), soyez prudent car plusieurs instances partagent l'objet prototype. Tant qu'une instance modifie la valeur du type référence, toutes les autres instances recevront les résultats modifiés.

Les caractéristiques partagées des objets prototypes peuvent facilement étendre certaines méthodes pour certains objets intégrés, comme la déduplication de tableau

function CreateObj(){}
    CreateObj.prototype = {
      name : 'ghostwu',
      skills : [ 'php', 'javascript', 'linux' ]
    };
    var obj1 = new CreateObj();
    obj1.skills.push( 'python' );
    var obj2 = new CreateObj();
    console.log( obj2.skills ); //'php', 'javascript', 'linux', 'python'

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article, et il y en a d'autres des choses passionnantes Veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Array.prototype.unique = function(){
      var res = [];
      for( var i = 0, len = this.length; i < len; i++ ){
        if( res.indexOf( this[i] ) == -1 ) {
          res.push( this[i] ); 
        }
      }
      return res;
    }
    var arr = [ 10, 20, 30, 20, 30, 20, 40, 20 ];
    console.log( arr.unique() ); //10, 20, 30, 40

Lecture recommandée :

Explication détaillée des étapes de définition des styles d'éléments dans js

html+canvas pour implémenter l'écran capture

Explication détaillée de l'implémentation jQuery de la fonction timer

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!