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 json 新手入门文档
Dec 03 Javascript
Javascript 面向对象 继承
May 13 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 Javascript
node.js中的http.createClient方法使用说明
Dec 15 Javascript
原生js实现日期联动
Jan 12 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
vue中将网页打印成pdf实例代码
Jun 15 Javascript
深入浅析var,let,const的异同点
Aug 07 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 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注入点构造代码
2008/06/14 PHP
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
PHP基础学习小结
2011/04/17 PHP
php导入csv文件碰到乱码问题的解决方法
2014/02/10 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
公司合作协议书范本
2014/04/18 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
高中数学教学反思范文
2016/02/18 职场文书
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏