首页  >  文章  >  web前端  >  toString()一个会自动调用的方法_javascript技巧

toString()一个会自动调用的方法_javascript技巧

WBOY
WBOY原创
2016-05-16 18:34:491439浏览

这一特性显然有助于你偷懒,当然也有利于实现一些特定的功能。为了说明这一特性,下面从一个实际开发案例说起。

如果在你的WEB项目中,有很多地方都需要输出像下面这样的一个列表HTML:

复制代码 代码如下:


  • JavaScript事件冒泡应用实例

  • 执行AJAX返回HTML片段中的JavaScript脚本



很显然这是一个LI结构,也许你会想每次要输出这样结构的HTML,难道自己都要去拼这些LI标签吗?我能不能每次调用一个方法仅输入LI中间的文本内容,最终简单地得到一个完整的UL HTML结构呢。当然可以,程序的实现有N种方法,看看下面这种方法,这种方法显然简单而且科学:
复制代码 代码如下:

function ulBuilder()
{
var lis = '';
this.addLi = function(liText)
{
lis = '
  • ' liText '
  • ';
    };

    this.toString = function()
    {
    return '
      ' lis '
    ';
    };
    }

    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
    声明:
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn