A brief analysis of how to use prototype to define your own methods_Basic knowledge

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 need to understand the concept of classes. JavaScript itself is an object-oriented language, and the elements involved are attached to a specific class based on 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)) -> Show 18

(2) Boolean.rev(): Function, invert Boolean variable
Implementation method: Boolean.prototype.rev = function(){return(!this);}
Test: alert((true).rev()) -> show false

Isn’t 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: Add a new element to the end of the array

Implementation method:

Copy code The code is as follows:

Array.prototype.push = function(new_element){
this[this.length]=new_element;
return this.length;
}

Let us further enhance it , allowing him to add multiple elements at once!

Implementation method:

Copy code The code is as follows:

Array.prototype.pushPro = function() {
var currentLength = this.length;
for (var i = 0; i < 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 as one character, it may not work in some practical applications. It will cause certain problems. Now we use prototype to make up for this shortcoming.

Implementation method:

Copy code The code is as follows:

String.prototype.Tlength = function(){
var arr=this.match(/[^x00-xff]/ig);
return this.length (arr==null?0:arr.length) ;
}

Test: alert("aaalaalaaa".Tlength()) -> Display 8

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 will not explain them. Please refer to relevant materials.

3. Implementation of new functions, in-depth prototype: What is used in actual programming is definitely not only the enhancement of existing methods, but also more functional requirements. Below I will give two examples of using prototypes to solve practical problems:

(1) String.left()
Problem: Anyone who has used vb should know the left function, which takes n characters from the left side of the string, but the disadvantage is that both full-width and half-width are considered Because it is a character, it is impossible to intercept strings of equal length in a layout with mixed Chinese and English

Function: intercept n characters from the left side of the string, and support the distinction between full-width and half-width characters

Implementation method:

Copy code The code is as follows:

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 ; left(4,true)) -> Show aa

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 (year, month, day, week) between two date variables

Implementation method:


Copy code

The code is as follows:Date.prototype.DayDiff = function(cDate ,mode){ try{ cDate.getYear();

}catch(e){

return(0);
}
var base =6 0*60*24 *1000;
var result = Math.abs(this - cDate);
switch(mode){
case "y":
result/=base*365;
Break; 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")) -> Show 10

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


(3) Number.fact()

Function: Factorial of a certain number

Implementation method:

Copy code

The code is as follows:

Number.prototype.fact=function(){
var num = Math.floor(this);
if(num<0)return NaN;
if(num==0 || num==1)
return 1;
else
return (num*(num-1).fact());
}

Test: alert((4).fact()) -> Display 24
This method mainly shows that the recursive method is also feasible in the prototype method!