JavaScript prototype property usage instructions_javascript tips

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 a In an object-oriented language, 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, number Addition
Implementation method: Number.prototype.add = function(num){return(this num);}
Test: alert((3).add(15)) -> Display 18


(2) Boolean.rev(): Function, negate Boolean variable
Implementation method: Boolean.prototype.rev = function(){return(!this);}
Test: alert ((true).rev()) -> Is it simple to display false

? This section only tells readers that there is such a method and how it is used.


2. Implementation and enhancement of existing methods, first introduction to prototype:
(1) Array.push(new_element)
Function: Add a new element at 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 him so that he can add multiple ones at a time element!
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;
}

Shouldn’t it be difficult to understand? 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 full-width are used here The encoding principles of characters are not explained in this article because they belong to two other larger categories. 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 for implementation. I will give two examples below. Examples of using prototype 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 a string, but the disadvantage is that it converts full-width and half-width 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:

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);
}

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:

Copy code The code is as follows:

　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 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!