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 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
基于jquery的direction图片渐变动画效果
May 24 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 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中的三元运算符使用说明
2011/07/03 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
Jquery常用技巧收集整理篇
2010/11/14 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
js获取页面description的方法
2015/05/21 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
python中的字典详细介绍
2014/09/18 Python
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
解读Python中degrees()方法的使用
2015/05/18 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
django缓存配置的几种方法详解
2018/07/16 Python
Flask配置Cors跨域的实现
2019/07/12 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
python 从list中随机取值的方法
2020/11/16 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
某公司Java工程师面试题笔试题
2016/03/27 面试题
办公室文秘自我评价
2013/09/21 职场文书
临床医学大学生求职信
2013/09/28 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
高中毕业自我评价
2014/02/08 职场文书
献爱心倡议书
2014/04/14 职场文书
小学生操行评语
2014/04/22 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
保险专业求职信
2014/07/07 职场文书
环保公益策划方案
2014/08/15 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
MySQL池化框架学习接池自定义
2022/07/23 MySQL