toString() a method that will be automatically called_javascript skills

This feature obviously helps you to be lazy, and of course it is also helpful to implement some specific functions. In order to illustrate this feature, let's start with an actual development case.

If in your WEB project, there are many places where you need to output a list of HTML like the following:

Copy code The code is as follows:

• JavaScript event bubbling application instance


• Execute AJAX to return HTML fragment The JavaScript script in

Obviously this is an LI structure. Maybe you want to output HTML with such a structure every time, don’t you have to do it yourself? Do you want to spell these LI tags? Can I only input the text content in the middle of LI every time I call a method, and finally get a complete UL HTML structure? Of course, there are N ways to implement the program. Take a look at the following method. This method is obviously simple and scientific:

Copy code The code is as follows:

function ulBuilder()
{
var lis = '';
this.addLi = function(liText)
{
lis = '

' liText '

';
};

this.toString = function()
{
return '

' lis '

';
};
}

var ulHtml = new ulBuilder();
ulHtml.addLi('JavaScript event bubbling application instance');
ulHtml.addLi('Execute AJAX to return the JavaScript script in the HTML fragment');
alert(ulHtml);

In the above code, we defined a class called ulBuilder, which has There are two public methods addLi and toString. The 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 being called at all, but alert(ulHtml) displays the complete UL structure of HTML.

In fact, when alert() is executed, the script parser will automatically check the toString method of the alert variable or object and call it. In the above example, we overridden the toString method, and it happens that this method will be automatically called and executed by the program.

Topic expansion:
1. In some object-oriented development languages, such as C# and JAVA, there is a constructor. This constructor is obviously a member method of the class. If you want to execute the code inside, We do not need to manually call this method. The code defined inside this method will be automatically executed when the class is instantiated. Of course, in order for the system to automatically execute some specific methods, the program architecture often stipulates the naming rules for these methods. For example, the name of the constructor method must be the same as the class name. Like in the above example, if you change this.toString to this.toUL, then the only way to get the correct result is to call alert(ulHtml. toUL()) like this.

2. Since the toString method can be overridden, it is sometimes particularly useful. Take a look at the example below and try out the difference between the output without rewriting and after rewriting. This example is obviously very unrobust. For example, it does not handle the nesting of arrays, and it has little practical significance. It is just to let you know that you can do this.

Copy code The code is as follows:

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

Here is another example, which is more practical than the above example. Under normal circumstances, when you alert(JSON), you cannot see the real structure of JSON, only [object Object] pops up. Try the following implementation, maybe this is the result you want. Of course, this method is also very imperfect. If you really want to use such a function, please go to the JSON official website to download the relevant JS library:

Copy code The code is 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