「オブジェクトはこのプロパティまたはメソッドをサポートしていません」IE10/11

Question

ES6では、jQueryを削除してネイティブJSを使用して、Webサイトの構築を迅速かつ軽量にしたいと考えています。また、私のJSスキルを向上させるために、私はjQueryを使いこなした人の一人です。

私は、ファイルを小さく保つために関数でより一般的に使用されるjavascriptを作るための小さな小さなライブラリを構築しています。

function $(elm) { 
    var elm = document.querySelectorAll(elm); 

    this.forEach = function(f) { 
     [].forEach.call(elm, f); 
    } 

    return elm; 
} 

function slider() { 
    $(".slider").forEach(function() { 
     alert("Hello"); 
    }); 
} 
slider(); 

これは、クロムなどで素晴らしい作品..しかし、IE10/11に私は

オブジェクトはこのプロパティまたはメソッド "のforEach"

をサポートしていないエラーを取得しています$（ "スライダ"）を参照してください。forEach

アイデア？

Answer 1

返すオブジェクトではなく、windowオブジェクトにforEachを追加しています。コンストラクタではなく、$を関数として呼び出しています。ルーズモード（明らかに）を使用しているので、関数呼び出し内のthisはグローバルオブジェクトへの参照です（ブラウザではwindowとしてもアクセス可能）。コレクションはquerySelectorAllから変更されていません。

Chromeで動作する理由は、querySelectorAllで返されたコレクションには独自のforEachが含まれているためです。これが機能するために

、4つのオプション：

1. 戻りオブジェクトとそのオブジェクトへのQSAコレクションから要素をコピーし、それにforEachを追加します。例えば：

   function $(selector) { 
       const result = Array.from(document.querySelectorAll(selector)); 
       result.forEach = Array.prototype.forEach; 
       // Perhaps map, filter, etc.; add in a loop? 
       return result; 
   } 
   

   またはES5で

   ：

   var $ = (function() { 
       var methods = Array.prototype; 
       function $(selector) { 
        var result = methods.slice.call(document.querySelectorAll(selector)); 
        result.forEach = methods.forEach; 
        // Perhaps map, filter, etc.; add in a loop? 
        return result; 
       } 
       return $; 
   })(); 
   

2. は、それがすでに存在しない場合はNodeListプロトタイプにforEachを追加し、querySelectorAllから収集に直接forEachを使用しています。例えば：

   if (typeof NodeList !== "undefined" && 
       NodeList.prototype && 
       !NodeList.prototype.forEach) { 
       Object.defineProperty(NodeList.prototype, "forEach", { 
        value: Array.prototype.forEach 
       }); 
   } 
   

   ...そして、もちろん、あなたの$はで開始する

   function $(selector) { 
       return document.querySelectorAll(selector); 
   } 
   

   （以上のものになっていないあなたはより多くの機能を追加したい場合、あなたはおそらく行ってみたいと思います。 ＃1の方法。）

3. 戻り配列：

   function $(selector) { 
       return Array.from(document.querySelectorAll(selector)); 
   } 
   

   またはES5で：完全に前ES2015 JavaScriptエンジンにpolyfilledすることはできません

   function $(selector) { 
       return Array.prototype.slice.call(document.querySelectorAll(selector)); 
   } 
   

4. サブクラスArray（）ので、あなた自身を追加することができますArrayの機能の上にある機能：

   class MyThingy extends Array { 
       // Perhaps further methods here 
   } 
   function $(selector) { 
       return MyThingy.from(document.querySelectorAll(selector)); 
   } 
   

   ここにES5オプションがない場合は、少なくとも透明化してポリ充てんする必要があります。

あなただけの「ので、」良いものpolyfilling以外の私はかなり＃4などが利用でき、Arrayによって提供されるものを超えて機能を追加するつもりなら。あなたの目的には十分かもしれません。