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

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'));

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

ここに画像の説明を挿入

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Javascript プロトタイプとプロトタイプチェーンをご存知ですか?
  • JavaScript のコンストラクター、プロトタイプ、プロトタイプ チェーン、new についてどれくらい知っていますか?
  • JavaScript プロトタイプとプロトタイプチェーンの深い理解
  • Js の継承とプロトタイプチェーンを理解するのに役立つ記事
  • JavaScript プロトタイプチェーンを理解するための 2 つの図
  • JavaScriptプロトタイプとプロトタイプチェーンの詳細な説明

<<:  Web 開発の面接と筆記試験に必須の知識(必読)

>>:  n 個のコンテナ要素による無限スクロールの実装コード

推薦する

W3C チュートリアル (12): W3C SOAP アクティビティ

Web サービスは、アプリケーション間の通信に関係しています。SOAP は、Web サービス間の X...

超詳細なMySQL使用仕様の共有

最近、データベース関連の操作が多くなり、会社の既存の仕様はあまり包括的ではありません。インターネット...

React 関数コンポーネントのパフォーマンス最適化のアイデアの詳細な説明

最適化のアイデア最適化には主に 2 つの方向があります。再レンダリングの回数を減らします。 Reac...

ES6 の Set および WeakSet コレクションの詳細な説明

目次セットは値が重複しない特別なコレクションです。セットコレクション基本API独自の価値判断セットを...

ページのスクロールバーを無効にするには、overflow: hiddenを使用します。

コードをコピーコードは次のとおりです。 html {オーバーフロー: 非表示; }体{オーバーフロー...

MySQLデータベースを定期的に自動バックアップする方法

データは貴重なものであることは誰もが知っています。データをバックアップしなければ、データをそのまま放...

Ubuntu 16.04 で MySQL マスター スレーブ同期を設定する方法

準備1. マスターとスレーブのデータベースのバージョンは一致している必要があります2. マスターデー...

Vueはドラッグアンドドロップを使用して構造ツリーを作成します

この記事の例では、ドラッグアンドドロップを使用して構造ツリーを作成するVueの具体的なコードを共有し...

よく使われるCSSスタイル(レイアウト)の詳しい説明

新しいCSS3プロパティと互換性ありCSS3では、プラグインprefixfree.min.jsを使用...

HTML でのフォームとフォーム送信操作に関する情報のコレクション

ここでは、フォーム要素とフォーム送信に関する知識を紹介します。フォーム要素フォーム要素の DOM イ...

ウェブページの表の分割線を削除する方法

<br />Web テーブルの分割線を削除する方法。実際、上記の 3 つの表はいずれも ...

Linux の操作とメンテナンスの基本システムディスク管理チュートリアル

1. ディスクパーティション: 2. fdiskパーティションディスクが2 TB未満の場合はfdis...

VUE uni-app でよく使用される API についての簡単な説明

目次1. ルーティングとページジャンプ2. インターフェース要約する1. ルーティングとページジャン...

Tomcatの再構成後に起動が遅くなる問題を迅速に解決

Jenkins+Tomcatサーバーの設定中に、Tomcat設定ファイルが変更され、サーバーのTom...

JS は Baidu 検索ボックスを実装します

この記事の例では、Baidu検索ボックスを実装するためのJSの具体的なコードを参考までに共有していま...