It is not good to extend native objects and prototype without special needs unless it is worthwhile, for example, add methods in ECMAScript5 to some old browsers
NoteThere is something inappropriate in translation. Thank you for your correction and wish you a happy double festival!
It is not good to extend native objects and prototype without special needs.
The Code is as follows:
// Do not do this
Array. prototype. map = function (){
// Some code
};
Unless this is worthwhile, for example, adding methods in ECMAScript5 to some old browsers.
In this case, we generally do this:
The Code is as follows:
If (! Array. prototype. map ){
Array. prototype. map = function (){
// Some code
};
}
If we are paranoid, we can change the check code to the following to prevent others from defining map as other unexpected values, such as true or others:
The Code is as follows:
If (typeof Array. prototype. map! = "Function "){
Array. prototype. map = function (){
// Some code
};
}
(Although this will destroy the map definitions of other developers and affect the implementation of their functions)
However, in a hostile and brutal environment (in other words, but when you provide or use a js Library), you should not trust anyone. If other people's js Code is loaded before your js Code and a map () method that is not fully compatible with ES5 is defined in some way, your code cannot run normally, what should I do?
However, you can trust the browser. If the Webkit kernel implements the map () method, you can rest assured that this method will certainly run normally. Otherwise, you will use your code for detection.
Fortunately, this is easy to implement in JavaScript. When you call the toString method of the native function, a function string is returned, the function body of this function is [native code].
For example, in the Chrome console:
The Code is as follows:
> Array. prototype. map. toString ();
"Function map () {[native code]}"
A proper code check is always a little unpleasant, because different browsers are too rash in handling spaces and line breaks. The test is as follows:
The Code is as follows:
Array. prototype. map. toString (). replace (/\ s/g ,'*');
// "* Function * map () * {****** [native * code] **} *" // IE
// "Function * map () * {***** [native * code] *}" // FF
// "Function * map () * {* [native * code] *}" // Chrome
Simply remove \ s to get a more practical string:
The Code is as follows:
Array. prototype. map. toString (). replace (/\ s/g ,'');
// "Functionmap () {[nativecode]}"
You can encapsulate it into a reusable shim () function, so you do not have to repeat all the similar!
Array. prototype. This function accepts an object as a parameter (for example, Array. prototype), an attribute to be added (for example, 'map'), and a function to be added.
The Code is as follows:
Function shim (o, prop, fn ){
Var nbody = "function" + prop + "() {[nativecode]}";
If (o. hasOwnProperty (prop )&&
O [prop]. toString (). replace (/\ s/g, '') === nbody ){
// The table name is native!
Return true;
}
// Newly added
O [prop] = fn;
}
Test:
The Code is as follows:
// This is a native Method
Shim (
Array. prototype, 'map ',
Function (){/*...*/}
); // True
// This is the newly added Method
Shim (
Array. prototype, 'mapzer ',
Function () {alert (this )}
);
[1, 2, 3]. mapzer (); // alerts 1, 2, 3
(End) ^_^