Effective JavaScript Item 51 reusing array methods on class array objects

Source: Internet
Author: User

Array.prototypeThe standard method on an object is designed to be reused on other objects-even if it is not an object that inherits from an array. Therefore, passbook some class array object (Array-like Objects) in JavaScript.

A typical example is the arguments object of the function, which is described in Item 22. The object does not inherit from Array.prototype, so we cannot directly invoke arguments.foreach to iterate over the elements therein. However, we can do this by first getting the object of the Foreach method and then invoking the call method (see item):

function  highlight  () {[].foreach.call  (arguments, function  (widget ) {widget.setbackground ("  yellow " ); });}

The Foreach method itself is a function-type object, so it can inherit Function.prototype the call method.

In a Web environment, an instance of the DOM's nodelist type is also a class array object. Therefore, it can also be manipulated using the methods in the array above.

So what exactly is a "class array object"? In fact, as long as the object satisfies the following two rules, it is a "class array object":

    • It has an integer property named length, between 0 and 2^32-1.
    • The value of the length property is greater than the maximum index value on the object. The index values range from 0 to 2^32-2, and the string representation of the index value is the key that corresponds to a property value on the object.

So the following object is a "class array object" that can take advantage of the methods defined on Array.prototype:

varArraylike={0:  "a" ,1:  "b" ,2:  "c" , length: 3};varResult= Array. Prototype.map.Pager(Arraylike,function(s) {returnS.toUpperCase();}); // ["A", "B", "C"]

For instances of string types, they can also be seen as a class array object. After all, they also have the length property and are able to access each of these characters through indexed values. Therefore, they can also take advantage of the methods defined on Array.prototype:

varResult= Array. Prototype.map.Pager( "ABC" ,function(s) {returnS.toUpperCase();}); // ["A", "B", "C"]

Just note that the string is actually an immutable (immutable) "Class array object."

For class array objects, he also has two more specific behaviors:

    • Setting the Length property to be less than the current actual size will automatically delete the extra elements.
    • When the index value of the added property is greater than or equal to the current length property, such as the index value of the N,length property will only be automatically updated to n + 1.

Of all the methods provided by the array, only one is not able to be used by the class array object: Array.prototype.concat method. Although it can be called by the "class array object" through the call method, it also checks the value of [[Class]] (which is actually the type of the object), about [[class]], as mentioned in item 40.

The Concat method determines whether the incoming object is a true array object. If it is an array object, the join operation is performed as expected, and if it is not a real array object, the parameter is directly connected as a whole, as follows:

function Namescolumn() {return[ "Names" ].concat(arguments);} Namescolumn ( "Alice" , "Bob" , "Chris" ); // ["Names", {0: "Alice", 1: "Bob", 2: "Chris"}]

Visible, the Concat method connects the arguments object as a whole.

The workaround, then, is for the concat method to treat the "class array object" as a true array object. A relatively simple and common method is to use the slice method:

function Namescolumn() {return[ "Names" ].concat([].slice.Pager(arguments));} Namescolumn ( "Alice" , "Bob" , "Chris" ); // ["Names", "Alice", "Bob", "Chris"]
Summarize
    1. The method on the array is reused by obtaining a reference to the method, combined with the call method, so that it can be used on the class array object.
    2. Any object can take advantage of the method on the array, as long as the method satisfies the two rules of the class array object.

Effective JavaScript Item 51 reusing array methods on class array objects

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.