Detailed explanation of prototype in js

prototype is a method introduced in IE 4 and later versions for objects of a certain class, and the special thing is: it is a method for adding methods to objects of a class! This may sound a bit confusing, don’t worry, I will explain this special method through examples below:

First of all, we must first understand the concept of classes, JavaScript itself It is an object-oriented language, and the elements involved are attached to a specific class according to their attributes. Our common classes include: array variables (Array), logical variables (Boolean), date variables (Date), structure variables (Function), numerical variables (Number), object variables (Object), string variables (String), etc. , and related class methods are also often used by programmers (here we need to distinguish between class attention and attribute sending methods), such as the push method of the array, the get series method of the date, the split method of the string, etc.,
But in the actual programming process, do you feel the shortcomings of the existing methods? The prototype method came into being! Below, we will explain the specific use of prototype from shallow to deep through examples:

1. The simplest example to understand prototype:

(1) Number.add( num): Function, adding numbers

Implementation method: Number.prototype.add = function(num){return(this+num);}
Test: alert((3).add(15 )) -> Display 18

(2) Boolean.rev(): Function, invert Boolean variable

Implementation method: Boolean.prototype.rev = function(){ return(!this);}
Test: alert((true).rev()) -> Display false

Is it very simple? This section just tells readers about another method and how this method is used.

2. Implementation and enhancement of existing methods, first introduction to prototype:

(1) Array.push(new_element)
Function: in Add a new element to the end of the array

Implementation method:

Array.prototype.push = function(new_element){
This[this.length]=new_element;
RETURN this.Length;

##}

This allows us to further enhance him, so that he can add multiple elements at a time!

Implementation method:

Array.prototype.pushPro = function() {

var currentLength = this.length;
for (var i = 0; i &lt ; arguments.length; i++) {
this[currentLength + i] = arguments[i];
}
return this.length;

}

It shouldn’t be difficult to understand, right? By analogy, you can consider how to delete any number of elements at any position by enhancing Array.pop (the specific code will not be detailed)

(2) String.length

Function : This is actually an attribute of the String class, but since JavaScript treats both full-width and half-width characters as one character, it may cause certain problems in some practical applications. Now we use prototype to make up for this shortcoming.
Implementation method:

String.prototype.cnLength = function(){

var arr=this.match(/[^\x00-\xff]/ig);
return this .length+(arr==null?0:arr.length);

}

Test: alert("EaseWe Spaces".cnLength()) -> Display 16

Some regular expression methods and the encoding principles of full-width characters are used here. Since they belong to two other larger categories, this article does not explain them. Please refer to relevant materials.

3. To implement new functions, go deep into prototypes: In actual programming, what is definitely used is not only the enhancement of existing methods, but also more functional requirements. Below I will give two solutions using prototypes. Examples of actual problems:

(1) String.left()

Question: Anyone who has used VB should know the left function, which takes n characters from the left side of a string, but the disadvantage is that it converts full-width and half-width characters are regarded as one character, resulting in the inability to intercept equal-length strings in a mixed Chinese and English layout
Function: intercept n characters from the left side of the string, and support the distinction between full-width and half-width characters
Implementation method:

String.prototype.left = function(num,mode){

If(!/\d+/.test(num))return(this);
var str = this.substr( 0,num);
if(!mode) return str;
var n = str.Tlength() - str.length;
num = num - parseInt(n/2);
return this.substr(0,num);

}

Test:
alert("EaseWe Spaces".left(8)) -> Display EaseWe space
alert("EaseWe Spaces".left(8,true)) -> Display EaseWe Empty
This method uses the String.Tlength() method mentioned above, and some good new methods can also be combined between custom methods!

(2) Date.DayDiff()
Function: Calculate the interval between two date variables (year, month, day, week)
Implementation method:

Date.prototype.DayDiff = function(cDate,mode){
         try{
             cDate.getYear();
         }catch(e){
             return(0);
         }
         var base =60*60*24*1000;
         var result = Math.abs(this - cDate);
         switch(mode){
             case "y":
                 result/=base*365;
                 break;
             case "m":
                 result/=base*365/12;
                 break;
             case "w":
                 result/=base*7;
                 break;
             default:
                 result/=base;
                 break;
         }
         return(Math.floor(result));
     }

Test: alert((new Date()).DayDiff((new Date(2002,0,1)))) -> Display 329
alert((new Date()).DayDiff((new Date( 2002,0,1)),"m")) -> Display 10

Of course, it can also be further expanded to obtain the response hours, minutes, or even seconds.

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