JavaScript 兼容 Array.prototype.slice.call

IE9之前的IE版本的HTMLCollection以及NodeList不是Object的子类。

在通过Array.prototype.slice.call进行数组化的时候，IE9之前的IE版本会抛出异常，因此需要进行兼容处理。

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <style rel="stylesheet" type="text/css">

 </style>

 <script>

 window.onload=function(){

     var n=document.getElementsByTagName("div");

     try{

         document.body.innerHTML=[].slice.call(n,0);

     }

     catch(ex){

         document.body.innerHTML="ERROR:"+ex.message;

     }

 }

 </script>

 </head>

 <body><div class="show">HELLO</div><div></div></body>

 </html>

兼容实现需要兼容IE9一下的IE版本，动手实现slice方法，
考虑到String对象，Window对象，Function对象，RegExp对象（黑莓4.7中）都有length属性，因此需要排除。
一个可能的实现如下：

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <script>

 window.onload=function(){

     var n=document.getElementsByTagName("div");

     try{

         document.body.innerHTML+=[].slice.call(n,0);

     }

     catch(ex){

         document.body.innerHTML+="ERROR:"+ex.message;

     }

     document.body.innerHTML+="<br/>"+getA(n,0);

 };

 var bIEltIE9=(function(){

     var ag=window.navigator.userAgent.toLowerCase();

     var reg=new RegExp("msie ([\\S]+);");

     if(reg.test(ag)){

         var version=RegExp.$1;

         if(parseInt(version)<9){

             return true;

         }

     }

     return false;

 })();

 var getA=function(a,start,end){

     if(a==null){

         return [];

     }

     if(!bIEltIE9){

         try{

             return [].slice.call(a,start,end);

         }

         catch(ex){}

     }

     var ret=[];

     var i=a.length;

     // 如果为空或者为字符串或者为函数或者为window对象或者为RegExp

     if(i==null||typeof a ==="string"||typeof a==="function"||a.setInterval||a instanceof RegExp){

         ret[0]=a;

     }

     else{

         while(i){

             ret[--i]=a[i];

         }

     }

     return ret;

 };

 </script>

 </head>

 <body><div class="show">数组化</div><div></div></body>

 </html>

上面代码的function和window判断不严瑾，具体参考：JavaScript 类型判断 —— typeof 以及 instanceof 中的陷阱。

更多可以参考：

《JavaScript框架设计司徒正美》P4 数组化。
《JQuery技术内幕》P68 数组操作方法。

巴特西

JavaScript 兼容 Array.prototype.slice.call

最新文章

热门文章