JSプロトタイプとプロトタイプチェーンについての簡単な説明

JSプロトタイプとプロトタイプチェーンについての簡単な説明

1. プロトタイプ

JavaScript のすべての関数にはこのプロパティがあり、プロトタイプ プロパティを持つすべてのオブジェクトは関数です。プロトタイプの目的は、オブジェクトにメソッド/プロパティを追加することです。

関数の永続性(){}
person.prototype.name = "xiaoming"
console.log(person.prototype)//{名前: "xiaoming", コンストラクター: ƒ}

2. プロトタイプポインタ: __proto__

上記の persion 関数がインスタンス オブジェクト Persion1 を生成し、prototype を使用してそれに属性を追加する場合、記述は次のようになります。

関数の永続性(){}
person.prototype.name = "xiaoming"
Persion1 を新しい Persion() にします。
console.log(Person1) //コンソールの結果は次のようになります

インスタンス Persion1 を印刷した結果は次のとおりです。

上記に出力された結果から、Persion1.__proto__.name = persion.prototype.name、つまり、インスタンス オブジェクトの __proto__ 属性はそのコンストラクターのプロトタイプと等しいことがわかります。

上記を理解すると、プロトタイプチェーンは簡単に理解できます。Persion1.__proto__.__proto__ を通じて Object メソッドを直接見つけることができます。あまり直感的ではないかもしれませんが、コードは次のとおりです。

関数の永続性(){}
person.prototype.name = "xiaoming"
Persion1 を新しい Persion() にします。
console.log(Person1.__proto__.__proto__.toString) //プロトタイプチェーンで見つかった Object の toString メソッド console.log(Object.prototype.toString) //Object の toString メソッド

コンソールには次の結果が出力され、プロトタイプ チェーンのレベルごとの検索機能が確認されます。

要約する

あらゆるオブジェクトは、プロトタイプ チェーン、つまり __proto__ 属性を通じてレベルごとに検索できます。最終的な焦点はオブジェクトであり、唯一の方法は関数です。それらの関係はチェーンのようなもので、この関係をプロトタイプ チェーンと呼びます。

上記は、JS プロトタイプとプロトタイプ チェーンの詳細についての簡単な説明です。JS プロトタイプとプロトタイプ チェーンの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • JavaScriptプロトタイプチェーンの詳細な説明
  • JavaScript プロトタイプとプロトタイプチェーンの詳細
  • JavaScriptプロトタイプとプロトタイプチェーンを徹底的に理解する
  • JavaScriptプロトタイプチェーンを理解する
  • JS の難しさ 同期と非同期、スコープとクロージャ、プロトタイプとプロトタイプ チェーンの詳細な説明
  • js のプロトタイプ、プロトタイプ オブジェクト、プロトタイプ チェーンの包括的な分析
  • JavaScript のプロトタイプとプロトタイプチェーンの詳細な説明

<<:  MySQL実行計画の詳細な分析

>>:  VMware15 の CentOS7 インストールの詳細なプロセスとよくある問題 (画像とテキスト)

推薦する

dockerコンテナにviコマンドをインストールする簡単な操作

docker コンテナを使用する場合、vim がインストールされていないことがあり、vim コマンド...

Centos7 FFmpeg オーディオ/ビデオ ツールのインストールに関する簡単なドキュメント

ffmpeg は非常に強力なオーディオおよびビデオ処理ツールです。公式 Web サイトは http:...

Reactは、読み込み、読み込み完了、読み込み失敗の3つの段階の原則分析を実装します。

最近ブログに書いたのですが、プロジェクトリストの中に写真がたくさんあり、最初は読み込みが遅いので、ス...

均一なアニメーション効果を実現するJavaScript

この記事の例では、JavaScriptで等速アニメーションを実装するための具体的なコードを参考までに...

Elasticsearch を使用する際の一般的な問題の解決策

1. redis で使用すると Netty の起動競合が発生するため、***Application ...

Linux での MySQL のアンインストールとインストールのグラフィック チュートリアル

ブログを書くのは初めてです。開発に携わって2年になります。仕事の後に何か有意義なことを見つけたいと思...

CSSでフォントアイコンを使用する方法をお教えします

まず、フォントアイコンとは何でしょうか?表面的にはアイコンですが、実際はテキストです。テキストの設定...

HTML サブタグと sup タグ

今日はあまり使わないHTMLタグ「subタグ」と「supタグ」を紹介します。定義と使用法: <...

JavaScript の toLocaleString() での時間フォーマットに関する新しいアイデア

目次1. 時刻表示に関する従来の考え方2. 時刻の書式設定 toLocaleString() Obj...

nginx を介して方向プロキシを実装するプロセスの図

この記事は主に、nginx を介して方向プロキシを実装するプロセスを紹介します。この記事のサンプル ...

Vue でのルーティングガードの具体的な使用法

目次1. グローバルガード1.1 グローバルフロントガード1.2 グローバルポストルートガード1.3...

MySQLデータベースがNULLを可能な限り避ける理由

MySQL の多くのテーブルには、NULL が列のデフォルト属性であるため、アプリケーションが NU...

WeChatアプレットがSMSログインを実装

目次1. インターフェース効果のプレビュー2.uViewのインストール3.uViewの設定3.1 m...

mysql5.7.14 解凍版インストールグラフィックチュートリアル

MySQL は、コミュニティ エディション (コミュニティ サーバー) とエンタープライズ エディシ...