フレームワーク/ライブラリは、ネイティブに既に存在しているのに、なぜ独自のヘルパーを持っているのでしょうか。

jQueryとAngularJSを見てみましょう。独自のeach反復関数があります。

• jQuery.each（）
• angular.forEach（）

しかし、我々は持っていArray.prototype.forEachます。

同様に、

• jQuery.parseJSON（）
• angular.fromJson（）

しかしJSON.parse()、バニラJavaScriptには関数があります。

これらのライブラリが作成されたとき、いくつかの主要なブラウザはこれらの機能をサポートしていなかったためです。一度作成して使用すると、これらの機能は多くのアプリケーションを壊さずにこれらのライブラリから削除できません。

（この場合、「メジャーブラウザー」とは、依然として市場シェアが大きいブラウザーを意味します。これには、多数のユーザーが必ずしも最新バージョンにアップグレードしないInternet Explorerなどの古いバージョンのブラウザーが含まれます。）

ので異なるブラウザは異なる実装と機能持つ彼らのJavaScriptエンジンで焼いています。同じ「vanilla-JS」コードは、2つの異なるブラウザー、または同じブラウザーの2つの異なるバージョンで異なる方法で実行できます。

人気のあるJSライブラリによって提供される抽象化レイヤーは、これを回避する方法です。舞台裏では、さまざまなブラウザーの容量と制限を回避し、それらの上に統合された使いやすいAPIを提供します。これにより、DOMオブジェクトの取得やJSONデータのフェッチなどの一般的な操作が、一貫性があり、効率的で、ブラウザーに依存しなくなります。

これにより、ブラウザーXまたはYで動作するようにコードを記述する方法ではなく、コードの動作に集中できる開発者の作業が大幅に容易になります。

1.後方互換性

JavaScriptはECMAScriptの実装です。これらの機能のほとんどはECMAScript 5（ES5）で導入されましたが、市場で十分なシェアを維持している多くの古いブラウザーはこれらの機能をサポートしていません（ECMAScript 5互換性表を参照）。これらの最も顕著なものはIE8です。

通常、ライブラリはネイティブ実装に戻ります。存在しない場合は、独自のポリフィルを使用します。たとえば、AngularJSの実装（angle.js L203-257）を見てみましょう。

function forEach(obj, iterator, context) {
  var key;
  if (obj) {
    if (isFunction(obj)){
      for (key in obj) {
        // Need to check if hasOwnProperty exists,
        // as on IE8 the result of querySelectorAll is an object without a hasOwnProperty function
        if (key != 'prototype' && key != 'length' && key != 'name' && (!obj.hasOwnProperty || obj.hasOwnProperty(key))) {
          iterator.call(context, obj[key], key);
        }
      }
    } else if (obj.forEach && obj.forEach !== forEach) {
      obj.forEach(iterator, context);
    } else if (isArrayLike(obj)) {
      for (key = 0; key < obj.length; key++)
        iterator.call(context, obj[key], key);
    } else {
      for (key in obj) {
        if (obj.hasOwnProperty(key)) {
          iterator.call(context, obj[key], key);
        }
      }
    }
  }
  return obj;
}

次の行は、forEachメソッドがオブジェクトに存在するかどうか、およびそれがAngularJSバージョンかどうかを確認します。そうでない場合は、既に指定されている関数（ネイティブバージョン）を使用します。

} else if (obj.forEach && obj.forEach !== forEach) {
  obj.forEach(iterator, context);
}

2.利便性

ネイティブJavaScript ではArray.prototype.forEach、のインスタンス専用のメソッドですが、ArrayほとんどのメソッドObjectは反復可能です。

このため、多くのライブラリ作成者は関数を多態的にしています（複数の型を入力として受け入れることができます）。上記のAngularJSコードを使用して、受け入れられる入力を確認しましょう。

機能：

if (isFunction(obj)){
  for (key in obj) {
    // Need to check if hasOwnProperty exists,
    // as on IE8 the result of querySelectorAll is an object without a hasOwnProperty function
    if (key != 'prototype' && key != 'length' && key != 'name' && (!obj.hasOwnProperty || obj.hasOwnProperty(key))) {
      iterator.call(context, obj[key], key);
    }
  }

配列（ネイティブforEachサポート付き）：

} else if (obj.forEach && obj.forEach !== forEach) {
  obj.forEach(iterator, context);

Array（ネイティブforEachサポートなし）、String、HTMLElement、有効な長さプロパティを持つオブジェクトを含む配列のようなオブジェクト：

} else if (isArrayLike(obj)) {
  for (key = 0; key < obj.length; key++)
    iterator.call(context, obj[key], key);

オブジェクト：

} else {
  for (key in obj) {
    if (obj.hasOwnProperty(key)) {
      iterator.call(context, obj[key], key);
    }
  }
}

結論

ご覧のとおり、AngularJSはほとんどのJavaScriptオブジェクトを反復処理しますが、ネイティブ関数と同じように機能しますが、はるかに異なるタイプの入力を受け入れ、ES5関数をライブラリに追加する有効な手段です。レガシーブラウザへ。