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中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
基于mootools插件实现遮罩层新手引导
May 24 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
用session做客户验证时的注意事项
2006/10/09 PHP
PHP的博客ping服务代码
2012/02/04 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
理解javascript中的with关键字
2016/02/15 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
eBay德国站:eBay.de
2017/09/14 全球购物
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
澳洲的服装老品牌:SABA
2018/02/06 全球购物
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
this关键字的作用
2016/01/30 面试题
青春演讲稿范文
2014/05/08 职场文书
广告宣传策划方案
2014/05/21 职场文书
国际会计专业求职信
2014/08/04 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL