序文プロトタイプとプロトタイプ チェーンに関する知識は、常に面接の焦点となってきました。それほど難しいことではありませんが、完全に理解するには、ある程度の努力が必要です。あなたの興味をそそる面接の質問を見てみましょう。 関数 User() {} User.prototype.sayHello = 関数() {} var u1 = 新しいユーザー(); var u2 = 新しいユーザー(); コンソールにログ出力します。 console.log(User.prototype.constructor); console.log(User.prototype === Function.prototype); console.log(User.__proto__ === Function.prototype); console.log(User.__proto__ === Function.__proto__); コンソールにログ出力します。(u1.__proto__ === u2.__proto__); console.log(u1.__proto__ === User.__proto__); console.log(Function.__proto__ === Object.__proto__); console.log(Function.prototype.__proto__ === Object.prototype.__proto__); console.log(Function.prototype.__proto__ === Object.prototype); 基礎を築くすべての JavaScript オブジェクトは、基本的に new 関数を通じて作成されます。これには、オブジェクト リテラルの形式で定義されたオブジェクト (new Object() の構文糖衣に相当) も含まれます。 オブジェクト、配列などを含むすべての関数は、基本的に新しい関数を通じて作成されます。 すべての関数はオブジェクトです。 プロトタイプ各関数には、プロトタイプであるプロパティ prototype があります。デフォルトでは、これは通常の Object オブジェクトであり、コンストラクターを呼び出すことによって作成されたインスタンスのプロトタイプです。 コンストラクタのプロパティJavaScriptには、プロトタイプからコンストラクタを指すプロパティもあります。コンストラクタ、つまりFunc.prototype.constructor --> Func __プロト__JavaScript のすべてのオブジェクト (null を除く) には、オブジェクトのプロトタイプを指す __proto__ プロパティがあります。 関数 User() {} var u1 = 新しいユーザー(); // u1.__proto__ -> User.prototype console.log(u1.__proto__ === User.prototype) // true 明らかに、インスタンスの __proto__ プロパティはコンストラクターのプロトタイプを指しているので、複数のインスタンスの __proto__ は同じプロトタイプを指すのでしょうか? var u2 = 新しいユーザー(); console.log(u1.__proto__ === u2.__proto__) // 真 複数のインスタンスの __proto__ がすべてコンストラクターのプロトタイプを指している場合、インスタンスが特定の方法でプロトタイプのメソッド、プロパティなどにアクセスできると、プロトタイプでプログラミングして継承の効果を実現できます。 プロトタイプとプロトタイプ チェーンの関係図を更新し続けましょう。 プロトタイプチェーンインスタンス オブジェクトが属性を探しているときに、見つからない場合は、__proto__ に従って、オブジェクトに関連付けられたプロトタイプを検索します。それでも見つからない場合は、最上位レベルが見つかるまで、プロトタイプのプロトタイプを検索します。これがプロトタイプ チェーンの概念です。 インタビューの質問を使用したプロトタイプ チェーンの例をいくつか見てみましょう。 例
改善する上記を学んだ後、ほとんどの面接の質問に答えることができます。例えば、次のようなものです。 関数A() {} 関数B(a) { これは、 } 関数C(a) { もし(a){ これは、 } } プロトタイプa = 1; B.プロトタイプ.a = 1; C.プロトタイプ.a = 1; コンソール.log(新しいA().a); //1 console.log(新しい B().a); //未定義 コンソール.log(新しいC(2).a); //2 しかし、Function.__proto__ === Object.__proto__、Function.prototype.__proto__ === Object.prototype.__proto__ など、記事の元の面接の質問を解決するにはまだ何かが欠けています。 1 つずつ取り組んでみましょう。 Object.__proto__、Object.prototype、Object.prototype.__proto__
// 要約: Object.__proto__ --> Function.prototype Object.prototype.__proto__ --> null Function.__proto__、Function.prototype、Function.prototype.__proto__
実践により、Object.__proto__ --> Function.prototype のみが存在することが証明されます。 一生懸命考えましたが、何も思いつきません。Function は岩の間から飛び出してきた猿なのでしょうか?そこで、ランダムにテストをいくつか実行したところ、予想外に手がかりが見つかりました。 上記から、次の結論が導き出せます: Function.__proto__ --> Function.prototype
要約する最後に、プロトタイプとプロトタイプ チェーンに関する知識を図にまとめます。
あとがき知識の海は、想像以上に広大であることがよくあります。私はプロトタイプとプロトタイプ チェーンを何度も研究してきましたが、より包括的かつ完全に理解できたと思います。しかし、この面接の質問に遭遇した後、私が学んできたことは単なる一分野に過ぎず、JS には発掘されるのを待っている深い宝物が本当にたくさんあることに気づきました。学びに終わりはありません。お互いに励まし合いましょう。 最後に、自信を高めるための簡単な面接の質問をご紹介します。 var F = 関数 () {} Object.prototype.a = 関数 () {} Function.prototype.b = 関数 () {} var f = 新しい F(); コンソールにログ出力します。 // プロトタイプチェーン // f.__proto__ --> F.prototype --> Object.prototype // F.__proto__ --> Function.prototype --> Object.prototype JavaScript プロトタイプとプロトタイプ チェーンに関するこの記事はこれで終わりです。JavaScript プロトタイプとプロトタイプ チェーンに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: CSS 標準: vertical-align プロパティ
>>: Docker デプロイメント Consul 構成プロセスの分析
データベースの組み込み関数の使用この記事では、主に日付関数、文字列関数、数学関数など、データベースの...
目次概要コードの実装要約する概要戦略パターンは、JavaScript デザイン パターンにおける動作...
今日は、MySQL をインストールしたかったので、公式 Web サイトにアクセスして、MySQL の...
序文あるプロジェクトの実行可能ファイルをインストールすると、MySQL 自体をインストールできるよう...
目次リナックス1. crontabの基本的な使い方2. ログを有効にする3. スケジュールされたタス...
==================================================...
2 台のテスト マシンを見つけます。 [root@docker1 centos_zabbix]# d...
Docker はホストマシン上のブリッジを仮想化します。コンテナを作成して起動すると、各コンテナには...
ようやく手元のプロジェクトが終了し、行方不明だった人たちが戻ってきました!プロジェクトを進める過程で...
シングルページアプリケーションの特徴「前提:」Web ページには、クリックするとサイト内の他のページ...
目次序文プロミスチェーンMDN エラー連鎖デフォルト処理略語非同期待機序文この記事を書いた理由は、ユ...
序文MySQL マスター スレーブ レプリケーションの基本原理は、スレーブ データベースがマスター ...
目次概要1. アプリケーションレベルのミドルウェア2. 組み込みミドルウェア3. サードパーティミド...
tomcat の containerID を見つけて、tomacat ディレクトリに入ります。 [r...
XML/HTML コードコンテンツをクリップボードにコピー< div style = &quo...