經常使用百度搜索的同學，一定不會忽視輸入框的下拉索引，它是如此方便，然而得天獨厚的條件使得這項異步技術多少面臨些考驗，高并發的服務端請求督促著他們的前端攻城師必須盡可能地減少發送ajax的次數。聽起來似乎與本文無關，但并不是這樣。首先就暫且讓我們為百度免費做個廣告吧。在百度首頁輸入“前端”一詞，利用chromebug可以很輕松地看到所發送的響應，結果顯示如下：
window.bdsug.sug({q:'前端';,p:false,s:['前端開發','前端工程師','前端總線','前端開發工程師','前端框架','前端總線頻率','前端面試題','前端分析','前端開發工具','前端觀察']});
百度試圖通過返回一個帶有obj參數的sug方法，來進行對下拉數據的渲染，當你在不刷新頁面的情況下再次輸入“前端”，類似的請求并沒有發生，這說明他們很可能建立了一個緩存對象，它的作用是臨時存儲請求過來的object，當后面輸入同樣的詞匯時，會首先檢索緩存對象的鍵，匹配成功后，直接讀取該對象的值，并不再向服務端發送請求，這樣就可以有效地節約成本了。
拋磚引玉，接下來談談真正的主角：hasOwnProperty方法。
相信jser們對hasOwnProperty并不陌生，我在此也只是江邊賣水了。
它是對象的專屬，用來判斷一個屬性是否存在于某對象的鍵中，return的是一個boolean值。這是一個例子：
var test0 = Array.prototype.hasOwnProperty('split'); //false，因為數組不存在split方法
var test1 = String.prototype.hasOwnProperty('split'); //true，因為split是String對象的內置方法
當你知道這些的時候，似乎還不足以看到hasOwnProperty的作用力，那么下面簡單地重現一下百度下拉的例子：
var data = {}, saveObj = function(val){
if(data.hasOwnProperty(val)){ //如果提交的值存在于data對象中，則不發送請求
var len = data[val].length;
for(var i = 0; i < len; i++){
console.log(data[val][i]);
}
}else{
var url = 'http://suggestion.baidu.com/su?wd=' + val;
$.ajax({ //為了示例清晰，此處用jquery的ajax為例
url : url + '&p=3&cb=window.bdsug.sug&sid=1421_1513_1541_1542_1582&t=1353756355137', //最后面一個參數t是一個時間戳
dataType : 'jsonp',
type : 'GET',
success : function(res){
var msg = res.data, len = msg.length;
msg == null && (msg = []);
if(len > 0){
data[val] = msg; //緩存搜索結果
for(var i = 0; i < len; i++){
console.log(msg[i]); //打印出請求結果
}
}
}, error : function(){
alert('error');
}
});
}
};
有同事質疑，這樣一來，緩存對象data占用的內存將會隨著存儲鍵值的越多而越大。那么我想說這是不可避免的，要節約服務端的請求，就必然要犧牲其它，而事實上緩存對象占據的空間通常情況下是可以忽略的，因為它并非“常駐內存”，一旦頁面刷新它將銷毀。然而我們可以給出另一個解決方案，給此對象約定一個峰值，比如最多它只允許存儲100個鍵值對，當超過100的數量時，通過delete運算符刪除前十條存儲的鍵或者干脆就不存儲，這樣就可以避免此問題了。
hasOwnProperty方法在對象的檢測中用得尤為普遍，當然有興趣的同學也可以去了解下propertyIsEnumerable方法，它是hasOwnProperty的增強版，能檢測自有屬性且該屬性的可枚舉性，本文就不再做詳細說明了。
