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 相关文章推荐
基于json的jquery地区联动效果代码
Jul 06 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 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
德生PL330的评价与改造
2021/03/02 无线电
超级简单的发送邮件程序
2006/10/09 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
JavaScript运算符小结
2015/06/03 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
python两种遍历字典(dict)的方法比较
2014/05/29 Python
python常见数制转换实例分析
2015/05/09 Python
分享Python字符串关键点
2015/12/13 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
Django在win10下的安装并创建工程
2017/11/20 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
Python对象转换为json的方法步骤
2019/04/25 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
广告学专业应届生求职信
2013/10/01 职场文书
思想专业自荐信范文
2013/12/25 职场文书
网上商城创业计划书范文
2014/01/31 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
三方股东合作协议书
2014/10/28 职场文书
就业意向协议书
2015/01/29 职场文书
外贸英文求职信范文
2015/03/19 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书