JavaScript の instanceof メソッドの手動実装

JavaScript の instanceof メソッドの手動実装

1. instanceofの使用法

instanceof演算子は、コンストラクター関数のprototypeプロパティがインスタンス オブジェクトプロトタイプ チェーンに出現するかどうかを検出するために使用されます。

関数 Person() {}
関数 Person2() {}

Person を新規作成します。

console.log(usr instanceof Person); // true
console.log(usr instanceof Object); // true

console.log(usr instanceof Person2); // false

上記のコードに示すように、2 つのコンストラクターPersonPerson2が定義され、 new操作を使用してPersonインスタンス オブジェクトusrが作成されます。

instanceof演算子を使用して、コンストラクターprototypeプロパティがusrインスタンスのプロトタイプ チェーン上にあるかどうかを確認します。

もちろん、結果は、 PersonObjectprototypeプロパティがusrのプロトタイプ チェーン上にあることを示しています。 usr Person2のインスタンスではないため、 Person2prototypeプロパティはusrのプロトタイプ チェーン上にありません。

2. instanceofの実装

instanceofの機能と原理を理解した後、 instanceofと同じ機能を持つ関数を実装できます。

関数 myInstanceof(obj, コンストラクター) {
    // obj の暗黙的なプロトタイプ let implicitPrototype = obj?.__proto__;
    // コンストラクターのプロトタイプ const displayPrototype =constructor.prototype;
    // プロトタイプチェーンを走査します while (implicitPrototype) {
        // 見つかったので true を返す
        if (implicitPrototype === displayPrototype) が true を返します。
        暗黙のPrototype = 暗黙のPrototype.__proto__;
    }
    // トラバーサルは終了しましたが、まだ見つかっていない場合は false を返します
    false を返します。
}

myInstanceof関数は、インスタンス オブジェクトobjとコンストラクターconstructor 2 つのパラメーターを受け取ります。

まず、インスタンス オブジェクトの暗黙的なプロトタイプ (コンストラクター関数constructor.prototypeのプロトタイプ オブジェクト、 obj.__proto__を取得します。

次に、前のレベルの暗黙的なプロトタイプを取得し続けることができます。

暗黙のPrototype = 暗黙のPrototype.__proto__;

プロトタイプ チェーンをトラバースするには、 displayPrototypeプロトタイプ チェーン上にあるかどうかを確認し、見つかった場合はtrueを返します。

implicitPrototypenullの場合、検索は終了し、見つからない場合はfalseが返されます。

プロトタイプ チェーンは、実際にはリンク リストに似たデータ構造です。

instanceof 、リンク リスト内にターゲット ノードが存在するかどうかを確認します。ヘッダーノードから始めて、連続的に後方にトラバースします。ターゲットノードが見つかった場合はtrueを返します。トラバーサルが終了し、オブジェクトが見つからない場合は、 falseが返されます。

3. 検証

instanceofの実装を確認するための簡単な例を書いてください。

関数 Person() {}
関数 Person2() {}

Person を新規作成します。

関数 myInstanceof(obj, コンストラクター) {
    暗黙のPrototypeをobj?.__proto__とします。
    const displayPrototype = コンストラクター.prototype;
    (暗黙のプロトタイプ) の間 {
        if (implicitPrototype === displayPrototype) が true を返します。
        暗黙のPrototype = 暗黙のPrototype.__proto__;
    }
    false を返します。
}

myInstanceof(usr, Person); // 真
myInstanceof(usr, Object); // 真

myInstanceof(usr, Person2); // 偽
myInstanceof(usr, Function); // 偽

myInstanceof(usr.__proto__, Person); // 偽
usr.__proto__ instanceof Person; // false

ご覧のとおり、 myInstanceof正しい結果を生成します。

興味深いことに、 usr.__proto__ instanceof Person false返します。これは、 obj instanceof constructorによって検出されたプロトタイプ チェーンにobjノード自体が含まれていないことを示しています。

一般的な手書きの JavaScript コード:

「GitHub — code-js」

JavaScript で手動で instanceof を実装する方法についての記事はこれで終わりです。JavaScript の instanceof に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Javascriptの理解_07_instanceofの実装原理を理解する
  • JavaScript における typeof と instanceof の使用法の詳細な説明
  • JavaScript での instanceof 演算子の使用例
  • JavaScript で instanceof 演算子を使用する例
  • JavaScript の型検出: typeof と instanceof の欠陥と最適化
  • JavaScript における instanceof 演算子の使用法の概要
  • JS における typeof と instanceof の違いのまとめ

<<:  Dockerコンテナ内のホストのホスト名が取得できない問題の解決方法

>>:  行の高さと垂直方向の配置についての深い理解

推薦する

JavaScript を使用して簡単なアルゴリズムを実行する方法

目次質問1件2つの方法3 実験結果と考察質問1件ご存知のとおり、 Pycharm 、 IDLE 、 ...

ボタントリガーイベントを使用して背景色の点滅効果を実現します

背景色の点滅効果を実現するには、次のコードを <body> 領域に追加するだけです。コー...

Vue の基本 MVVM、テンプレート構文、データバインディング

目次1. Vueの概要Vue公式サイトMVVM アーキテクチャ パターンVue の紹介2. Vueを...

GolangでMySQLデータベースのバックアップを実装する方法

背景Navicat は、最高の MySQL 視覚化ツールです。ただし、ビューのインポートとエクスポー...

MySQL データ ウェアハウスを保護するための 5 つのヒント

さまざまなソースからデータを集約することで、中央倉庫を作成できます。データ ウェアハウスは、ビジネス...

IDEA が docker を統合して springboot プロジェクトを展開するプロセス全体

目次1. IDEAはdockerプラグインをダウンロードします2. クラウドサーバーDocker 2...

MySQL Binlog ログ処理ツールの比較分析

目次運河マクスウェルデータバスAlibaba Cloud のデータ転送サービス (DTS)運河ポジシ...

ウェブサイトのフロントエンドパフォーマンスの最適化: JavaScript と CSS

Yahoo チームが書いた、ウェブサイトのパフォーマンス最適化に関する記事を読みました。この記事は...

CSS スタイルの優先順位はどれくらい複雑ですか?

昨晩、面接の質問を見ていたら、CSS スタイルの優先順位について特に明確に説明していない人が何人かい...

Unicode の数学記号の概要

数学、物理学、および一部の科学技術分野で使用される特殊記号は多数あります。Unicode コードには...

SQL Server での exists と except の使用法の概要

目次1. 存在する1.1 説明1.2 例1.3 交差/2017-07-21 2. 除く2.1 説明2...

Web ページのソース ファイルを表示できない場合はどうすればよいですか?

Q: Outlook または IE のどちらを使用している場合でも、マウスを右クリックすると、ポッ...

いくつかの面接の質問を使ってJavaScriptの実行メカニズムを調べる

目次前の単語同期と非同期前菜プレートを追加マクロタスク マイクロタスク約束しましょうタイマーを追加す...

CCS におけるマージン: トップ崩壊問題を解決する

HTML 構造は次のとおりです。 CCS 構造は次のとおりです。 ページ効果図は次のとおりです。 こ...

MySQL のユニークインデックスと通常のインデックスのどちらを選択すればよいでしょうか?

ユーザー テーブルを設計するときに、各人の ID 番号が一意であり、検索する必要があるシナリオを想像...