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 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
javascript 闭包详解
Jul 02 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
js序列化和反序列化的使用讲解
Jan 19 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
PHP4实际应用经验篇(5)
2006/10/09 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python 列表降维的实例讲解
2018/06/28 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
外贸采购员求职的自我评价
2013/11/26 职场文书
期中考试后的反思
2014/02/08 职场文书
天网工程实施方案
2014/03/26 职场文书
2015年服务员工作总结
2015/04/08 职场文书
2016党员党章学习心得体会
2016/01/14 职场文书
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技