Exploring _javascript Techniques of length attribute in JavaScript

Source: Internet
Author: User
Tags array length
Example 1:
Copy Code code as follows:

var obj={0: ' A ', 1: ' B '}
alert (obj.length); Undefined
var arr=[' A ', ' B ']
alert (arr.length); 2

From the example above, the length property in the class array object is not directly tied to the amount of data it stores, whether the index attribute (0,1) or the length property exists as the object's normal property, and there is no relationship between them. The JS engine does not automatically compute the length of the class array object based on the amount of data stored.
But does the length of the class array object have anything to do with the amount of data stored? Example 2 illustrates that this is not true:
Example 2:
Copy Code code as follows:

function Myarr () {}
var m=new myarr ();
Array.prototype.push.apply (m,[' Cson ', ' Lai ', ' xiaoc ');
alert (m.length);//IE8 below: Undefined other browsers: 3
Alert (m[2]);//IE8 below: Undefined other browsers: ' Xiaoc '

As you can see from Example 2, the length property of an object is also computed when you add an element to a class array object by forcing an array method, in addition to IE8 the following version. The following version of IE8 does not seem to support enforcing the use of array methods to add elements to class array objects.
Example 3:
This example adds an initialization operation to the Myarr constructor of Example 2, adding an element to the initialization of the class array object, and something weird happens:
Copy Code code as follows:

function Myarr () {this[0]= ' CC ';}
var m=new myarr ();
Array.prototype.push.apply (m,[' Cson ', ' Lai ', ' xiaoc ');
alert (m.length);//IE8 below: Undefined others: 3
Alert (m[2]);//IE8 below: undefined other: XIAOC

IE8 the following version of the browser continues to seem to not support the forced use of array methods, which is discussed in the next example. For other browsers, the length property output is 3, and the element indexed by 2 is ' XIAOC ', and the JS engine completely ignores the element ' CC ' that has an index of 0 in the original class array object. Now let's look at another example, an example of an additional initialization of the length attribute on the basis of Example 3:
Copy Code code as follows:

function Myarr () {this[0]= ' CC '; this.length=1} Add an initialization of one length
var m=new myarr ();
Array.prototype.push.apply (m,[' Cson ', ' Lai ', ' xiaoc ');
alert (m.length);//Output 4
Alert (m[2]);//output ' Lai '

Strange things happen again, this time all browsers (including IE6 7) are correctly output 4, indexed 2 elements are correctly exported to ' Lai ', the array method can be used normally after IE 6 7 has added the initialization of the length property.
Now try to initialize the length property to an illegal type:
Example 4:
Copy Code code as follows:

function Myarr () {this[0]= ' cc '; this.length= ' Bo ';} Length is set to an illegal type that cannot be converted to number
var m=new myarr ();
Array.prototype.push.apply (m,[' Cson ', ' Lai ', ' xiaoc ');
alert (m.length);//Output 3
Alert (m[2]);/output ' XIAOC '

Copy Code code as follows:

function Myarr () {this[0]= ' cc '; this.length= ' 1 ';} Length is set to an illegal type that can be converted to numbers
Array.prototype.push.apply (m,[' Cson ', ' Lai ', ' xiaoc ');
alert (m.length);//Output 4
Alert (m[2]);//output ' Lai '

From all of the above examples, we can make an inference that when using an array method (here, for example, push), this is probably the process:
IE6 7:
It is visible that IE6 7 is not not very forced to add an element using an array method, but it first determines whether the length property exists and, if it does not, returns, without any action. If the length property is an illegal value, the attempt is converted to the number type, and if the conversion fails, the length is set to 0, which resolves the correct output of the undefined and example 4 in Example 2, 3.

Other browsers:
Other browsers do different things based on the length property, and if the length property does not exist, set length to 0 and if the length property is an illegal value, try converting to the number type, or length set to 0 if the conversion fails.

Because the length property is so decisive for array methods, the JS engine prohibits writing an illegal value on the length property:
Copy Code code as follows:

var arr=[' 1 ', ' 2 ', ' 3 '];
Arr.length= ' undefined '/error Invalid array length

From the example above, we can draw the conclusion that when we use Class array objects, we should initialize the value of the length property when we initialize the class array object in order to avoid the weird problems caused by the incorrect calculation of length. If an element is added while initializing but no value is set for the length property, when an array method is used, IE6 7 ignores all operations and the other browsers ignore the elements that were added when the initialization was initiated.

Another problem with the length attribute is also introduced:
Please see example 5:
Copy Code code as follows:

function Myarr () {}
Myarr.prototype=new Array ();
var m=new myarr ();
M.push (' Cson ', ' Lai ', ' xiaoc ');
alert (m.length);//ie6 7:0 others: 3
Alert (m[2]);//All browsers: ' Xiaoc '

When using a prototype to inherit an array, IE 6 7 will always be 0, no matter how many elements you have, the other browsers are normal.
Even if you force the length property to be set, IE6 7 is 0:
Copy Code code as follows:

function Myarr () {}
Myarr.prototype=new Array ();
var m=new myarr ();
m.length=10;
alert (m.length);//ie6 7:0 others: 10

Therefore, it is concluded that the length property will always be 0 when the object prototype inherits the array under IE6 7, so if the class array object needs to use the method of the array, instead of inheriting the array, you should use Array.prototype.xxx.apply (obj,[]); And remember to properly initialize the value of the length property.
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.