JavaScript Tour-eighth stop: Tell me instanceof stepped on a hole

Source: Internet
Author: User
Tags string format

A few days ago to write JS encountered a instanceof pit, our page has an IFRAME, I calculated an array in the index page, and then need to pass to the flight page

In a function of this nested IFRAME (searchflight), as defensive programming, I need to test the parameters in the Searchflight function, which is

The array type is determined.

One: Throw a question

As an example, there are two pages below.

Index.html page

1 <!DOCTYPE HTML>2 <HTMLxmlns= "http://www.w3.org/1999/xhtml">3 <Head>4     <title></title>5 </Head>6 <Body>7 8     <iframename= "Childframe"src= "flight.html"></iframe>9 Ten     <Scripttype= "Text/javascript"> One  A window.onload= function () { -             //Flight -             varAirplanes= ["MU", "CA", "CZ"]; the  -             varresult=window.frames[0].flight. Searchflight (airplanes); -         }; -     </Script> + </Body> - </HTML>

Flight.html page

1 <!DOCTYPE HTML>2 <HTMLxmlns= "http://www.w3.org/1999/xhtml">3 <Head>4     <title></title>5 </Head>6 <Body>7     <Scripttype= "Text/javascript">8 9         varFlight= (function () {Ten  One             return { A Searchflight:function(arr) { -                     varresult=arrinstanceofArray; - alert (result); the                 } -             }; -         })(); -     </Script> + </Body> - </HTML>

I was surprised to find out that instanceof could not determine that arr is an array, in fact, we can see with the naked eye, it is an array, but why instanceof do not judge it?

We know that INSTANCOF is actually a JS syntax sugar, I changed into a simple point, to determine whether the arr.constructor point to the array, so I changed the keyword into the following form, and then look at the effect.

1         varFlight = (function () {2 3             return {4Searchflight:function(arr) {5                     //var result = arr instanceof Array;6 7                     var result = Arr.constructor = = Array;8 9 alert (result);Ten                 } One             }; A})();

From the picture, it is a bit strange, obviously are function Array (), why are not equal? But the fact is placed in front of the eyes, can not justify, only to calm down to think about, we

Know that the array in JS is a reference type, since it is not equal that means they are actually two references, right, and the array is a property hanging under window, window property

That is, an instance of a window, that means that index.html is an instance of window, flight.html is also a window instance, in order to verify, we look at the two window

Are they equal?

After reading the picture, the answer is very clear, with C # thinking about it, since the big window is not equal, the array attribute is naturally not equal, finally the problem is found, the following

How to solve it?

Second: Solve the problem

1. Length Judgment

This is easy to think of, but also the simplest, we know each array has length, so you can simply see if the length exists on it, but this is not foolproof

, we know that there are two properties in function length and prototype, then there is a problem. That way I would mistakenly put F as an array.

2. Use the prototype call method to implement

This method is somewhat ingenious, first of all we need to know that each function will have the call method and the prototype property, and JS in the Object.prototype in the ToString function to do a

Encapsulation, which is called Tostring.call, returns the string format of [object Constructorname], where the constructorname is the function name of the call parameter, for example, we

When Arr passes in, it returns the "[Object Array]" string format, which also allows us to intelligently determine if it is an Array, but unfortunately, we do not see the inside of this call

Part realizes, only the black box remembers.

JavaScript Tour-eighth stop: Tell me instanceof stepped on a hole

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.