Code sniffing in JavaScript expands native objects and prototypes (prototype) _javascript tips

Source: Internet
Author: User

Note : The translation of what is not appropriate place, we welcome you to correct, I wish you a happy double section!
The practice of extending native objects and prototypes (prototype) without special needs is not good

Copy Code code as follows:

Don't do this.
Array.prototype.map = function () {
Some code
};

Unless this is worthwhile, for example, add some ECMAScript5 methods to some old browsers.
In this case, we generally do this:
Copy Code code as follows:

if (! Array.prototype.map) {
Array.prototype.map = function () {
Some code
};
}

If we are more paranoid, in order to prevent others from defining the map as another unexpected value, like true or otherwise, we can change the detection code to the following:
Copy Code code as follows:

if (typeof Array.prototype.map!== "function") {
Array.prototype.map = function () {
Some code
};
}

(although this will destroy the other developers ' map definitions and affect their functionality implementation)
However, in a hostile and brutal competition (in other words, but you provide or use a JS library), you should not trust anyone. What if the other person's JS code is loaded before your JS code and somehow defines an incomplete compatible ES5 map () method that causes your code to not function properly?

However, you can trust the browser, if the WebKit kernel implements the map () method, you can rest assured that this method will certainly work. Otherwise, you will have to use your code for testing.

Luckily, this is easy to implement in JavaScript, and when you call the ToString method of the native function, you return a string of functions that are called [native code].
For example, under the Chrome console:
Copy Code code as follows:

> Array.prototype.map.toString ();
"Function map () {[native code]}"

An appropriate code check has always been a slightly unpleasant thing to do, because different browsers are too reckless with whitespace and wrapping. The test is as follows:
Copy Code code 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 removing the \s will get a more useful string:
Copy Code code as follows:

Array.prototype.map.toString (). Replace (/\s/g, ' ");
"Functionmap () {[Nativecode]}"

You can encapsulate it into a reusable shim () function, so you don't have to repeat all of the same!

Array.prototype ... Such an operation. This function takes an object as an argument (for example, Array.prototype), a property to be added (such as ' map '), and a function to add.
Copy Code code 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;
}
The newly added
O[prop] = fn;
}

Test:
Copy Code code as follows:

It's 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) ^_^

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.