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车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
杨氏矩阵查找的JS代码
Mar 21 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
Vue EventBus自定义组件事件传递
Jun 25 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
摩卡咖啡
2021/03/03 咖啡文化
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
jquery图片切换插件
2015/03/16 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
layui 弹出删除确认界面的实例
2019/09/06 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
python要安装在哪个盘
2020/06/15 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
.NET面试问题集
2015/12/08 面试题
Shell如何接收变量输入
2016/08/06 面试题
酒店门卫岗位职责
2013/12/29 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书