toString()一個會自動調(diào)用的方法

2019-11-21 00:45:19

字體：大中小

供稿：網(wǎng)友

這一特性顯然有助于你偷懶，當然也有利于實現(xiàn)一些特定的功能。為了說明這一特性，下面從一個實際開發(fā)案例說起。

如果在你的WEB項目中，有很多地方都需要輸出像下面這樣的一個列表HTML：

 
<ul> 
<li>JavaScript事件冒泡應(yīng)用實例</li> 
<li>執(zhí)行AJAX返回HTML片段中的JavaScript腳本</li> 
</ul> 

很顯然這是一個LI結(jié)構(gòu)，也許你會想每次要輸出這樣結(jié)構(gòu)的HTML，難道自己都要去拼這些LI標簽嗎？我能不能每次調(diào)用一個方法僅輸入LI中間的文本內(nèi)容，最終簡單地得到一個完整的UL HTML結(jié)構(gòu)呢。當然可以，程序的實現(xiàn)有N種方法，看看下面這種方法，這種方法顯然簡單而且科學(xué)：

復(fù)制代碼代碼如下:

 
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事件冒泡應(yīng)用實例'); 
ulHtml.addLi('執(zhí)行AJAX返回HTML片段中的JavaScript腳本'); 
alert(ulHtml); 

在上面的代碼中，我們定義了一個類叫ulBuilder，它有兩個公開方法addLi、toString，addLi方法是添加一個包含內(nèi)容的LI標簽，而toString方法是生成最終需要的UL HTML。在這個類的實際使用過程中，你根本沒有看到toString方法的調(diào)用，但是alert(ulHtml)卻顯示了完整的UL結(jié)構(gòu)的HTML。

實際上alert()的時候，腳本解析器會自動檢查alert變量或?qū)ο蟮膖oString方法并調(diào)用它。在上面的例子中，是我們重寫了toString方法，而恰好這個方法會由程序自動調(diào)用執(zhí)行。

話題擴展：
1、在一些面向?qū)ο蟮拈_發(fā)語言中，比如C#、JAVA都有構(gòu)造函數(shù)，這個構(gòu)造函數(shù)顯然作為類的一個成員方法，要想執(zhí)行里面的代碼，并不需要我們手動去調(diào)用這個方法，這個方法內(nèi)部定義的代碼會在類實例化的時候自動執(zhí)行。當然，為了讓系統(tǒng)能自動執(zhí)行一些特定的方法，往往程序架構(gòu)會對這些方法的命名規(guī)則有規(guī)定，比如構(gòu)造方法的名稱要與類名相同。像上面的例子中，如果把this.toString改成this.toUL，那么要想得到正確的結(jié)果只能像這樣調(diào)用了alert(ulHtml. toUL())。

2、由于toString方法可以被重寫，有時候顯的特別有用。看看下面的例子，試一下沒有重寫與重寫后輸出的結(jié)果有什么不同。這個例子顯然很不健壯，比如對數(shù)組嵌套的情況沒有作處理，而且實際意義也不大，只為讓你知道可以這樣做。

復(fù)制代碼代碼如下:

 
Array.prototype.toString = function() 
{ 
return '[/'' + this.join('/',/'') + '/']'; 
}; 
var companys = ['Adobe','Apple','Google','Intel','Microsoft','Oracle','IBM','SUN']; 
alert(companys); 

下面再舉一個例子，這個例子比上面例子實用些。正常情況下你alert(JSON)的時候，并不能看到JSON的真正結(jié)構(gòu)，只彈出[object Object]，試試下面的實現(xiàn)，也許這是你想要的結(jié)果。當然這個方法也是很不完善的，真要使用這樣的功能，請到JSON官方站點去下載相關(guān)JS庫吧：

復(fù)制代碼代碼如下:

 
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); 