JavaScript プロトタイプチェーンすべてのオブジェクトには、別のオブジェクトを指すプロトタイプがあります。他のオブジェクトにも独自のプロトタイプがあります。プロトタイプのプロトタイプで構成されるチェーンは、プロトタイプ チェーンと呼ばれます。 プロトタイプチェーンの終わり プロトタイプ チェーンが無限である場合、プロトタイプ チェーンに存在しないプロパティを検索すると、検索が続行され、無限ループが発生します。明らかにそうではありません。では、プロトタイプ チェーンの終わりは何でしょうか? オブジェクトプロトタイプトップレベルのプロトタイプコードを見てね〜 // objリテラルの作成方法はnew Object()に似ています // この場合、obj オブジェクトは Object のインスタンス、つまり、obj.__proto__ === Object.prototype になります。 var obj = { 名前: "fzb", }; // では、obj.__proto__ または Oject.prototype の __proto__ とは何でしょうか? 答えは「null」です console.log(obj.__proto__); // [オブジェクト: null プロトタイプ] {} console.log(obj.__proto__.__proto__); // ヌル
1. オブジェクトには prototype プロパティがありますが、 prototype は 2. このオブジェクトには他にも多くのメソッドがありますが、列挙できず、表示できません。 Objectオブジェクトのメモリマップを作成する上記の例のメモリグラフ オブジェクトはすべてのクラスの親クラスですプロトタイプチェーンの先頭にあるプロトタイプオブジェクトは、オブジェクトのプロトタイプオブジェクトである。 例: 関数 Student(sno, name) { this.sno = sno; this.name = 名前; } 2018年1月1日、新しいStuクラスが作成されました。 console.log(stu); // 学生 { sno: 201801、名前: 'fzb' } console.log(stu.__proto__); // {} console.log(stu.__proto__.__proto__); // [オブジェクト: null プロトタイプ] {} console.log(Student.__proto__); // {} /* ***************コメント内容については後ほど詳しく説明します*************** * Student.__proto__ = [Object: null prototype] {} ではないのはなぜですか? * Student.__proto__ = Function.prototype なので * Function.prototype.__proto__ = Object.prototype = [Object: null prototype] {} * ***************注釈の内容については後ほど詳しく説明します*************** */ console.log(Student.__proto__.__proto__); // [オブジェクト: null プロトタイプ] {} メモリマップ: 継承を実現するためのプロトタイプチェーン継承によりコードの再利用が可能になり、サブクラスで 例: 関数Person() { this.name = "fzb"; } Person.prototype.running = 関数 () { console.log(this.name + "実行中~"); }; 関数 Student(sno) { this.sno = sno; } Student.prototype = 新しいPerson(); // プロトタイプオブジェクト全体を書き直した後、コンストラクタを再構成します Object.defineProperty(Student.prototype, "コンストラクタ", { 設定可能: true、 列挙可能: false、 書き込み可能: true、 値: 学生、 }); Student.prototype.studying = 関数 () { console.log(this.name + "学習中"); }; 学生データ stu.running(); // fzb が実行中です~ stu.studying(); // fzb は勉強中です メモリマップ: 欠陥 1> サブクラス オブジェクトを印刷する場合、一部の属性を印刷する必要がありますが、親クラスにあるため、印刷できません。 2> 複数のサブクラス オブジェクトが特定の操作を実行すると、それらは相互に影響を及ぼします。 // 上記の例に少しコードを追加します。 関数Person() { this.name = "fzb"; this.friends = []; // 属性を追加する} 学生のクラスを stu1 に変更します。 stu1.friends.push("zzw"); 学生のクラスを stu2 に変更します。 console.log(stu2.friends); // [ 'zzw' ] // stu2 は stu1 の friends 属性を取得しますが、これは許可されていません 3> パラメータを渡すことができません。親クラスのコンストラクタにいくつかのプロパティが存在します。サブクラスをインスタンス化するときに、初期化パラメータを親クラスに渡すことができません。 コンストラクタによる継承サブクラスのコンストラクター内で、コンストラクターを呼び出します。親クラスのコンストラクターで this ポインターを変更すると、親クラスによって this に追加されたプロパティが、サブクラスによってインスタンス化されたオブジェクト上に存在するようになります。 関数 Person(名前) { this.name = 名前; this.friends = []; } Person.prototype.running = 関数 () { console.log(this.name + "実行中~"); }; 関数 Student(sno, name) { Person.call(this, name); // コードを追加 this.sno = sno; } Student.prototype = 新しいPerson(); // プロトタイプオブジェクト全体を書き直した後、コンストラクタを再構成します Object.defineProperty(Student.prototype, "コンストラクタ", { 設定可能: true、 列挙可能: false、 書き込み可能: true、 値: 学生、 }); Student.prototype.studying = 関数 () { console.log(this.name + "学習中"); }; 学生名を 201801 に設定します。 stu1.friends.push("zzw"); 学生名を 201802 とします。 console.log(stu2.friends); // [] この時点で、プロトタイプチェーン継承の 3 つの欠点は解決されます。しかし、新たな欠陥が見つかりました。 欠陥 1> 親クラスのコンストラクタは少なくとも2回実行される 2> サブクラスコンストラクタのプロトタイプオブジェクトは親クラスのインスタンスオブジェクトなので、オブジェクトのプロパティは未定義になります。 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: キャッシュサーバーを構築するためのMemcached方式
>>: MySQL の group by と order by を一緒に使用する方法
nginx をリバース プロキシ tomcat として使用する場合、セッション損失が発生する可能性が...
1. 今日の午後、コースの要件により、Ubuntu で FTP サーバーを設定する実験を行う必要が...
この記事では、例を使用して、MySQL の計画されたタスクとイベントのスケジュールについて説明します...
一般的に、URL に基づいてファイルをダウンロードする場合、次の 2 つの解決策があります。 1. ...
序文MySQL インデックスで最も重要なデータ構造は B+ ツリーなので、まずは B+ ツリーの原理...
CentOS8.0-1905 のリリース後、FTP サーバーを CentOS の新しいバージョンに移...
目次1. コンポーネントの紹介2. コンポーネントの内部構造とロジック1. コード組織構造2. マッ...
デザイナーが特別なイベントのタイトルフォントとして以下のフォントを使用したい場合はどうすればよいでし...
最近、 Three.jsでReactを使用して、720 度のパノラマ写真を閲覧できるプロジェクトを構...
1. 属性付きHTMLタグXML/HTML コードコンテンツをクリップボードにコピー< htm...
wget や curl ツールを使用して、Linux サーバーで大規模なネットワーク ファイルを直接...
解決策は次のとおりです。 1. コンテナを強制削除する docker rm -f ジェンキンス2. ...
目次導入ログ分類パラメータファイルエラーログファイル完全なログファイルスロークエリログバイナリログフ...
Nginx Rewriteの使用シナリオ1. URL アドレスジャンプ。たとえば、ユーザーが pm....
このアイデアを改善し、より良い意見を得られることを期待して、議論を刺激するためにいくつかの値を大まか...