toString()一个会自动调用的方法


Posted in Javascript onFebruary 08, 2010

这一特性显然有助于你偷懒,当然也有利于实现一些特定的功能。为了说明这一特性,下面从一个实际开发案例说起。

如果在你的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 相关文章推荐
JQuery 文本框使用小结
May 22 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
在实例中重学JavaScript事件循环
Dec 03 Javascript
jQuery AJAX回调函数this指向问题
Feb 08 #Javascript
JavaScript Event学习第九章 鼠标事件
Feb 08 #Javascript
JavaScript 类似flash效果的立体图片浏览器
Feb 08 #Javascript
js 省地市级联选择
Feb 07 #Javascript
js 自定义的联动下拉框
Feb 07 #Javascript
比较搞笑的js陷阱题
Feb 07 #Javascript
javascript 鼠标拖动图标技术
Feb 07 #Javascript
You might like
星际争霸任务指南——神族
2020/03/04 星际争霸
PHP rsa加密解密使用方法
2015/04/27 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
php与js的区别是什么
2013/08/05 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
vue axios同步请求解决方案
2017/09/29 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
给Python入门者的一些编程建议
2015/06/15 Python
总结Python编程中函数的使用要点
2016/03/20 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
《雾凇》教学反思
2014/02/17 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
宿舍标语大全
2014/06/19 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
2015年新农合工作总结
2015/03/30 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript