Detaillierte Erläuterung der Schritte zur Verwendung von js-Prototypobjekten

Dieses Mal werde ich Ihnen die Schritte zur Verwendung von js-Prototypobjekten und die Vorsichtsmaßnahmen für die Verwendung von js-Prototypobjekten ausführlich erläutern. Das Folgende ist ein praktischer Fall . Werfen wir einen Blick darauf.

Beginnen wir mit einem einfachen

Konstruktor+Prototyp-Objekt-Applet

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

An diesem Programm ist nichts auszusetzen, aber es ist sehr redundant. Jedes Mal, wenn eine Methode erweitert wird, muss ein Prototypobjekt geschrieben werden. Wir können den Prototypobjektprototyp als Literalobjekt behandeln, und alle Methoden sind im Literal Objekt. Erweiterung,

kann den gleichen Effekt erzielen:

Diese Art des Schreibens des Prototypobjekts schreibt jedoch das Standardprototypobjekt von CreateObj neu. Das erste Problem besteht darin, dass der Konstruktor nicht mehr auf CreateObj verweist.

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

Vor dem Umschreiben verweist der Konstruktor auf CreateObj

Nach dem Umschreiben zeigt der Konstruktor auf

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

Object

Daher kann der Konstruktor das Objekt nicht genau identifizieren, da es geändert wird

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

Die Programme, die wir zuvor geschrieben haben, haben grundsätzlich die Methoden für das Prototypobjekt (Prototyp) erweitert und dann das Objekt instanziiert. Wir instanziieren zuerst das Objekt und erweitern dann die Funktion für das Prototypobjekt (Prototyp). > Können Instanzobjekte erweiterte Methoden normal aufrufen?

Es kann normal aufgerufen werden, aber wenn das Prototypobjekt überschrieben wird, kann es nicht

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

aufgerufen werden Da nach dem Umschreiben des Prototypobjekts die Instanziierung vor dem Umschreiben erfolgt, zeigt der implizite Prototyp

proto

der Instanz nicht auf das überschriebene Prototypobjekt, sodass kein weiteres Problem aufgerufen werden kann Seien Sie vorsichtig, da mehrere Instanzen das Prototypobjekt gemeinsam nutzen. Solange eine Instanz den Wert des Referenztyps ändert, erhalten alle anderen Instanzen die geänderten Ergebnisse.

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() ); //报错

Die gemeinsamen Eigenschaften von Prototypobjekten können einige Methoden für einige integrierte Objekte leicht erweitern, wie z. B. Array-Deduplizierung

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'

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben, und es gibt noch mehr Spannende Dinge Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

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

Detaillierte Erläuterung der Schritte zum Festlegen von Elementstilen in js

html+canvas zur Implementierung des Bildschirms Capture

Detaillierte Erläuterung der jQuery-Implementierung der Timer-Funktion

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Verwendung von js-Prototypobjekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!