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 相关文章推荐
Jquery选择器 $实现原理
Dec 02 Javascript
jQuery 学习入门篇附实例代码
Mar 16 Javascript
jquery 查找新建元素代码
Jul 06 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
vue结合element-ui使用示例
Jan 24 Javascript
JS函数进阶之继承用法实例分析
Jan 15 Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 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
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
通过对php一些服务器端特性的配置加强php的安全
2006/10/09 PHP
thinkphp分页实现效果
2016/10/13 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
jquery 简单导航实现代码
2009/09/11 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
简述Python中的面向对象编程的概念
2015/04/27 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
Python应用库大全总结
2018/05/30 Python
Python生成器generator用法示例
2018/08/10 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
2014年度考核工作总结
2014/12/24 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android