Detailed explanation of the steps for using js prototype objects

This time I will bring you a detailed explanation of the steps for using js prototypeobject, what are the notes for using js prototype object, the following is a practical case, let’s take a look .

Let’s start with a simpleConstructor Prototype object 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;
    }

There is no problem with this program, but it is very redundant. Every time a method is extended, a prototype object must be written. We can treat the prototype object prototype as a literal object, and all methods are in the literal object. Extension, can achieve the same effect:

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

However, this way of writing the prototype object rewrites the default prototype object of CreateObj. The first problem caused is that the constructor no longer points to CreateObj.

Before rewriting, the constructor points to 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

After rewriting, the constructor points to Object

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

Therefore, the constructor cannot accurately identify the object because it will be modified

The programs we wrote before basically extended the methods on the prototype object (prototype) and then instantiated the object. Let's take a look. First, instantiate the object and then extend the function on the prototype object (prototype).

Can instance objects call extended methods normally?

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

It can be called normally, but if the prototype object is overridden, it cannot be called

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

Because after the prototype object is rewritten, the instantiation occurs before the rewriting, so the implicit prototype proto of the instance will not point to the overridden prototype object, so another problem cannot be called. , if there is a reference type on the prototype object (prototype), be careful because multiple instances share the prototype object. As long as one instance changes the value of the reference type, all other instances will receive the changed results.

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'

The shared characteristics of prototype objects can easily extend some methods for some built-in objects, such as array deduplication

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

I believe you have mastered the method after reading the case in this article. Please pay attention for more exciting things. Other related articles on php Chinese website!

Recommended reading:

Detailed explanation of the steps for setting element styles in js

html canvas to implement screen capture

Detailed explanation of jQuery implementation of timer function

The above is the detailed content of Detailed explanation of the steps for using js prototype objects. For more information, please follow other related articles on the PHP Chinese website!