ToString () A method that is automatically invoked _javascript tips

Source: Internet
Author: User
This feature obviously helps you to be lazy and, of course, helps to implement certain functions. To illustrate this feature, let's start with a practical development case.

If there are many places in your Web project that need to output a list of HTML like the following:
Copy Code code as follows:

<ul>
<li>javascript Event Bubbling Application Example </li>
<li> perform Ajax returns JavaScript script in HTML fragment </li>
</ul>

Obviously this is an LI structure, perhaps you would like to output this structure every time the HTML, do you have to spell these li tags? Can I call one method at a time and just enter the text content in the middle of Li, and finally simply get a complete UL HTML structure? Of course, the implementation of the program there are n ways to look at the following method, this method is obviously simple and scientific:
Copy Code code as follows:

function Ulbuilder ()
{
var lis = ';
This.addli = function (Litext)
{
Lis + + ' <li> ' + litext + ' </li> ';
};

this.tostring = function ()
{
Return ' <ul> ' + lis + ' </ul> ';
};
}

var ulhtml = new Ulbuilder ();
Ulhtml.addli (' JavaScript event bubbling Application instance ');
Ulhtml.addli (' Execute AJAX script in HTML fragment ');
alert (ulhtml);

In the code above, we define a class called Ulbuilder, which has two public methods Addli, Tostring,addli method is to add an LI tag containing content, and the ToString method is to generate the final required UL HTML. In the actual use of this class, you do not see the ToString method call at all, but alert (ulhtml) shows the complete UL structure of HTML.

In fact, when alert (), the script parser automatically checks the alert variable or object's ToString method and invokes it. In the above example, we have rewritten the ToString method, and this is exactly the method that is invoked by the program to execute automatically.

Topic Extension:
1. In some object-oriented development languages, for example, C #, Java have constructors, this constructor obviously as a member of the class method, to execute the code inside, do not need us to manually invoke this method, this method of the internal definition of the code will be instantiated when the class automatically executed. Of course, in order for the system to automate certain methods, it is often the program architecture that prescribes the naming rules for these methods, such as the name of the constructor to be the same as the class name. As in the above example, if you change the this.tostring to This.toul, the correct result can only be called alert (ulhtml. Toul ()) like this.

2. Because the ToString method can be rewritten, it is sometimes particularly useful. Take a look at the example below, and try not to rewrite the results of the output after the rewrite is different. This example is clearly not robust, such as the case of array nesting is not handled, and the actual significance is not so much as to let you know that you can do so.
Copy Code code as follows:

Array.prototype.toString = function ()
{
return ' [\] + this.join (' \ ', \ ') + ' \ '] ';
};
var companys = [' Adobe ', ' Apple ', ' Google ', ' Intel ', ' Microsoft ', ' Oracle ', ' IBM ', ' SUN '];
alert (companys);

Here's another example, this example is more practical than the example above. Normally when you are in alert (JSON), you don't see the true structure of JSON, just pop [object], try the following implementation, maybe that's the result you want. Of course, this method is also very imperfect, really want to use such a function, please go to the JSON official site to download the relevant JS Library bar:
Copy Code code as follows:

var userInfo =
{
"Name": "Mike",
"Age": 23,
"Phone": "020-87654321",
"ToString": function ()
{
var objstr = ';
for (var key in this)
{
if (typeof (This[key]) = = ' String ')
Objstr + = ' "' + Key + '": "' + This[key] + '", ';
}
Return ' {' + objstr.replace (/,$/, ') + '} ';
}
}
alert (userInfo);

Author: Webflash

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.