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的自动完成插件
Feb 03 Javascript
jquery.cookie用法详细解析
Dec 18 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
JavaScript实现区块链
Mar 14 Javascript
js将键值对字符串转为json字符串的方法
Mar 30 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
基于JavaScript获取url参数2种方法
Apr 17 Javascript
javascript实现支付宝滑块验证码效果
Jul 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
yii框架源码分析之创建controller代码
2011/06/28 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
django中的ajax组件教程详解
2018/10/18 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
jQuery Ajax文件上传(php)
2009/06/16 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
[05:59]2018DOTA2国际邀请赛寻真——只为胜利的Secret
2018/08/13 DOTA
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
python实现自动解数独小程序
2019/01/21 Python
python顺序执行多个py文件的方法
2019/06/29 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
海淘母婴商城:国际妈咪
2016/07/23 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
群胜软件Java笔试题
2012/09/29 面试题
后勤主管工作职责
2013/12/07 职场文书
外贸业务员工作职责
2014/01/06 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python