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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
javascript事件冒泡实例分析
May 13 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
继续学习javascript闭包
Dec 03 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
原生js验证简洁注册登录页面
Dec 17 Javascript
js实现密码强度检验
Jan 15 Javascript
微信小程序 数据遍历的实现
Apr 05 Javascript
vue-hook-form使用详解
Apr 07 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 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
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
PHP echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
PHP递归删除目录几个代码实例
2014/04/21 PHP
php轻松实现文件上传功能
2016/03/03 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
给文字加上着重号的JS代码
2013/11/12 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
Python程序员开发中常犯的10个错误
2014/07/07 Python
在Python的Django框架中包装视图函数
2015/07/20 Python
python如何在终端里面显示一张图片
2016/08/17 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
Python 爬虫性能相关总结
2020/08/03 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
教师自荐信
2013/12/10 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
服务之星事迹材料
2014/05/03 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
舞出我人生观后感
2015/06/16 职场文书