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 相关文章推荐
javascript实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
js 颜色选择器(兼容firefox)
Mar 05 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
js变量提升深入理解
Sep 16 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
vue自定义全局共用函数详解
Sep 18 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 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中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
JavaScript的事件机制详解
2017/01/17 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
python主要用于哪些方向
2020/07/05 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
英语专业毕业生自我鉴定
2013/11/09 职场文书
教师专业理论水平的自我评价分享
2013/11/09 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
九年级历史教学反思
2016/02/19 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
如何理解python接口自动化之logging日志模块
2021/06/15 Python
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS