JavaScriptプロトタイプチェーン図のまとめと実践

プロトタイプチェーン

class キーワードは ES6 で導入されましたが、JS はまだプロトタイプベースであり、class は実際には構文上の糖衣です。

たとえば、people クラスがあります。

クラス People {
  コンストラクタ(props) {
    プロパティの名前を変更します。
  }
  走る（） {
    コンソールログ('実行')
  }
}

新しい人民階級を通じて、張三や李斯など多くの人々が生み出されます。

let lisi = new People('李四')

しかし、広大な人間の海の中には、並外れた才能を持った人々のグループがいます。彼らはスーパーヒーローと呼ばれています。

クラスHeroはPeopleを拡張します{
   コンストラクタ(props) {
    スーパー(小道具);
    this.power = props.power
   }
   ヘイハ() {
       アラート(this.power)
   }
}

Hero クラスは People を継承しているので、ヒーローはまず run メソッドを持つ個体であり、次に Hero には普通の人にはない超能力 heyHa メソッドがあります。大砲の超能力を持つジンクスというヒーローを次のように定義できます。

Jinx = new Hero({ name: 'jinx', power: 'cannon!' }) とします。

インスタンス Jinx は run メソッドを定義していませんが、プロトタイプチェーンを使用すると、People プロトタイプにこの run メソッドがあること、つまり、その暗黙的なプロトタイプ __proto__ がコンストラクターのプロトタイプを指していることを確認できます。

ここに画像の説明を挿入

インスタンスがメソッドまたはプロパティにアクセスする場合、インスタンス自体から開始し、プロトタイプチェーンを遡って検索します。

Jinx.heyHa() // 大砲！
// このメソッドがある場合 Jinx.run = () => console.log('i just fly!')
Jinx.run() // ただ飛ぶだけ！

では、 People.prototype.__proto__どこを指しているのでしょうか? Object.prototype場合、コンソールにコードを入力すると、次のようになります。

ここに画像の説明を挿入

しかし、 Object.prototypeの__prototype__ null に等しく、宇宙の終わりは無です。。

ここに画像の説明を挿入

これまでのところ、完全なプロトタイプチェーン図は次のようになります。

ここに画像の説明を挿入

プロトタイプチェーンに基づいてシンプルなJQueryライブラリを実装することができます

クラス JQuery {
  コンストラクタ(セレクタ、ノードリスト) {
    const res = nodeList || document.querySelectorAll(セレクタ);
    定数長さ = res.length;
    (i = 0; i < 長さ; i++) の場合 {
      this[i] = res[i]
    }
    this.length = 長さ;
    this.selector = セレクター;
  }
  eq(インデックス) {
    新しいJQuery(undefined、[this[index]])を返します。
  }
  それぞれ(fn) {
    for(i = 0; i < this.length; i++) {
      const ele = this[i]
      fn(要素)
    }
    これを返します。
  }
  on(type, fn) {
    this.each(ele => { を返します。
      ele.addEventListener(タイプ、fn、false)
    })
  }
  // 他のDOM APIを拡張する
}
const $$ = (セレクター) => new JQuery(セレクター);
$$('body').eq(0).on('click', () => alert('click'));

コンソールで実行すると、結果は次のようになります。

ここに画像の説明を挿入