プロトタイプチェーン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() // ただ飛ぶだけ! では、 しかし、 これまでのところ、完全なプロトタイプ チェーン図は次のようになります。 プロトタイプチェーンに基づいてシンプルな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 のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: n 個のコンテナ要素による無限スクロールの実装コード
Web サービスは、アプリケーション間の通信に関係しています。SOAP は、Web サービス間の X...
最近、データベース関連の操作が多くなり、会社の既存の仕様はあまり包括的ではありません。インターネット...
最適化のアイデア最適化には主に 2 つの方向があります。再レンダリングの回数を減らします。 Reac...
目次セットは値が重複しない特別なコレクションです。セットコレクション基本API独自の価値判断セットを...
コードをコピーコードは次のとおりです。 html {オーバーフロー: 非表示; }体{オーバーフロー...
データは貴重なものであることは誰もが知っています。データをバックアップしなければ、データをそのまま放...
準備1. マスターとスレーブのデータベースのバージョンは一致している必要があります2. マスターデー...
この記事の例では、ドラッグアンドドロップを使用して構造ツリーを作成するVueの具体的なコードを共有し...
新しいCSS3プロパティと互換性ありCSS3では、プラグインprefixfree.min.jsを使用...
ここでは、フォーム要素とフォーム送信に関する知識を紹介します。フォーム要素フォーム要素の DOM イ...
<br />Web テーブルの分割線を削除する方法。実際、上記の 3 つの表はいずれも ...
1. ディスクパーティション: 2. fdiskパーティションディスクが2 TB未満の場合はfdis...
目次1. ルーティングとページジャンプ2. インターフェース要約する1. ルーティングとページジャン...
Jenkins+Tomcatサーバーの設定中に、Tomcat設定ファイルが変更され、サーバーのTom...
この記事の例では、Baidu検索ボックスを実装するためのJSの具体的なコードを参考までに共有していま...