toString()一个会自动调用的方法
更新时间：2010年02月08日 07:40:06 作者：
toString方法的作用是不用多说的了，这个JavaScript内置方法还有一个特性是：在执行一些特殊方法的时候，比如alert或innerHTML等方法，它将由脚本解析器自动调用。
这一特性显然有助于你偷懒，当然也有利于实现一些特定的功能。为了说明这一特性，下面从一个实际开发案例说起。
如果在你的WEB项目中，有很多地方都需要输出像下面这样的一个列表HTML：
<ul>
<li>JavaScript事件冒泡应用实例</li>
<li>执行AJAX返回HTML片段中的JavaScript脚本</li>
</ul>
很显然这是一个LI结构，也许你会想每次要输出这样结构的HTML，难道自己都要去拼这些LI标签吗？我能不能每次调用一个方法仅输入LI中间的文本内容，最终简单地得到一个完整的UL HTML结构呢。当然可以，程序的实现有N种方法，看看下面这种方法，这种方法显然简单而且科学：
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事件冒泡应用实例');
ulHtml.addLi('执行AJAX返回HTML片段中的JavaScript脚本');
alert(ulHtml);
在上面的代码中，我们定义了一个类叫ulBuilder，它有两个公开方法addLi、toString，addLi方法是添加一个包含内容的LI标签，而toString方法是生成最终需要的UL HTML。在这个类的实际使用过程中，你根本没有看到toString方法的调用，但是alert(ulHtml)却显示了完整的UL结构的HTML。
实际上alert()的时候，脚本解析器会自动检查alert变量或对象的toString方法并调用它。在上面的例子中，是我们重写了toString方法，而恰好这个方法会由程序自动调用执行。
话题扩展：
1、在一些面向对象的开发语言中，比如C#、JAVA都有构造函数，这个构造函数显然作为类的一个成员方法，要想执行里面的代码，并不需要我们手动去调用这个方法，这个方法内部定义的代码会在类实例化的时候自动执行。当然，为了让系统能自动执行一些特定的方法，往往程序架构会对这些方法的命名规则有规定，比如构造方法的名称要与类名相同。像上面的例子中，如果把this.toString改成this.toUL，那么要想得到正确的结果只能像这样调用了alert(ulHtml. toUL())。
2、由于toString方法可以被重写，有时候显的特别有用。看看下面的例子，试一下没有重写与重写后输出的结果有什么不同。这个例子显然很不健壮，比如对数组嵌套的情况没有作处理，而且实际意义也不大，只为让你知道可以这样做。
Array.prototype.toString = function()
{
return '[\'' + this.join('\',\'') + '\']';
};
var companys = ['Adobe','Apple','Google','Intel','Microsoft','Oracle','IBM','SUN'];
alert(companys);
下面再举一个例子，这个例子比上面例子实用些。正常情况下你alert(JSON)的时候，并不能看到JSON的真正结构，只弹出[object Object]，试试下面的实现，也许这是你想要的结果。当然这个方法也是很不完善的，真要使用这样的功能，请到JSON官方站点去下载相关JS库吧：
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);
作者：WebFlash
如果在你的WEB项目中，有很多地方都需要输出像下面这样的一个列表HTML：
复制代码 代码如下:
<ul>
<li>JavaScript事件冒泡应用实例</li>
<li>执行AJAX返回HTML片段中的JavaScript脚本</li>
</ul>
很显然这是一个LI结构，也许你会想每次要输出这样结构的HTML，难道自己都要去拼这些LI标签吗？我能不能每次调用一个方法仅输入LI中间的文本内容，最终简单地得到一个完整的UL HTML结构呢。当然可以，程序的实现有N种方法，看看下面这种方法，这种方法显然简单而且科学：
复制代码 代码如下:
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事件冒泡应用实例');
ulHtml.addLi('执行AJAX返回HTML片段中的JavaScript脚本');
alert(ulHtml);
在上面的代码中，我们定义了一个类叫ulBuilder，它有两个公开方法addLi、toString，addLi方法是添加一个包含内容的LI标签，而toString方法是生成最终需要的UL HTML。在这个类的实际使用过程中，你根本没有看到toString方法的调用，但是alert(ulHtml)却显示了完整的UL结构的HTML。
实际上alert()的时候，脚本解析器会自动检查alert变量或对象的toString方法并调用它。在上面的例子中，是我们重写了toString方法，而恰好这个方法会由程序自动调用执行。
话题扩展：
1、在一些面向对象的开发语言中，比如C#、JAVA都有构造函数，这个构造函数显然作为类的一个成员方法，要想执行里面的代码，并不需要我们手动去调用这个方法，这个方法内部定义的代码会在类实例化的时候自动执行。当然，为了让系统能自动执行一些特定的方法，往往程序架构会对这些方法的命名规则有规定，比如构造方法的名称要与类名相同。像上面的例子中，如果把this.toString改成this.toUL，那么要想得到正确的结果只能像这样调用了alert(ulHtml. toUL())。
2、由于toString方法可以被重写，有时候显的特别有用。看看下面的例子，试一下没有重写与重写后输出的结果有什么不同。这个例子显然很不健壮，比如对数组嵌套的情况没有作处理，而且实际意义也不大，只为让你知道可以这样做。
复制代码 代码如下:
Array.prototype.toString = function()
{
return '[\'' + this.join('\',\'') + '\']';
};
var companys = ['Adobe','Apple','Google','Intel','Microsoft','Oracle','IBM','SUN'];
alert(companys);
下面再举一个例子，这个例子比上面例子实用些。正常情况下你alert(JSON)的时候，并不能看到JSON的真正结构，只弹出[object Object]，试试下面的实现，也许这是你想要的结果。当然这个方法也是很不完善的，真要使用这样的功能，请到JSON官方站点去下载相关JS库吧：
复制代码 代码如下:
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);
作者：WebFlash
相关文章
JavaScript flash复制库类 Zero Clipboard
开发中经常会用到复制的功能，在 IE 下实现比较简单。但要想做到跨浏览器比较困难了。2011-01-01
点击后僵硬的切换是不是很不爽，下面为大家介绍的是根据锚点offset值来实现动画切换，喜欢的朋友不要错过2014-09-09
这篇文章主要为大家介绍了JavaScript中的声明提升实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
js实现input密码框提示信息的方法(附html5实现方法)
这篇文章主要介绍了js实现input密码框提示信息的方法,涉及JavaScript页面元素的获取,属性判断及样式设置等技巧,并附带html5的相关实现方法,需要的朋友可以参考下2016-01-01
本文向我们简单介绍了javascript中自定义模板的2种方法，图文并茂，十分详细，这里推荐给小伙伴们。2015-01-01
UTC格式时间想必大家并不陌生，那么怎么可以将其转换为本地格式呢？其实很简单，下面的方法会帮助大家实现这一想法2013-09-09
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
这篇文章主要为大家详细介绍了JavaScript运动框架的第二部分，解决防抖动问题、悬浮对联问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
在javascript中javascript:void(0)经常会用到，大家知道此含有吗，在Javascript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值，本文给大家介绍js中javascript:void(0) 真正含义，需要的朋友可以参考下2015-08-08
静态对象和构造函数的使用区别 平常我们会经常使用JSON形式，或者var obj=function(){}亦或function(){}这么几种对象的构建办法，有时会认为这是等价的办法，然而他们还有不同。2010-03-03
线性仪表图表示显示所需值的垂直或水平线性刻度，带有颜色刻度以及单个或多个指针。本文将详细讲解如何利用JavaScript创建线性仪表图，需要的可以参考一下2022-03-03
最新评论