JavaScript中hasOwnProperty方法在Ajax缓存中的应用

Ajax请求与缓存机制分析

常使用搜索引擎的用户，对输入框的下拉联想功能并不陌生。这种便捷的交互体验背后，往往伴随着高并发服务端请求的压力，促使前端开发者尽可能减少Ajax请求次数。虽然这看似与本文主题无关，实则紧密相关。以百度首页为例，输入关键词后，通过浏览器调试工具可观察到其响应数据，具体结果如下所示。

window.bdsug.sug({q:'前端';,p:false,s:['前端开发','前端工程师','前端总线','前端开发工程师','前端框架','前端总线频率','前端面试题','前端分析','前端开发工具','前端观察']});

百度通过返回带有obj参数的sug方法来实现下拉数据的渲染。当用户在不刷新页面的情况下再次输入相同关键词时，并未发起新的网络请求。这表明系统可能建立了一个缓存对象，用于临时存储请求返回的object。当后续输入相同词汇时，系统首先检索缓存对象的键，若匹配成功，则直接读取该对象的值，无需再向服务端发送请求，从而有效节约了资源。

接下来，我们将探讨本文的核心：hasOwnProperty方法。

熟悉JavaScript的开发者对hasOwnProperty方法应该不陌生，此处仅作简要介绍。

hasOwnProperty方法详解

该方法属于对象特有，用于判断某个属性是否存在于对象的自有键中，返回值类型为布尔值。示例如下：

var test0 = Array.prototype.hasOwnProperty('split'); //false，因为数组不存在split方法
var test1 = String.prototype.hasOwnProperty('split'); //true，因为split是String对象的内置方法

基于hasOwnProperty的缓存实现与优化

了解上述基础后，我们似乎尚未完全看到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的增强版，能够检测自有属性且该属性的可枚举性。本文不再对此进行详细说明。