on:2020年1月14日sponsorsJavaScriptにはどのオブジェクトにもプロトタイプと呼ばれる便利な隠しプロパティがあります。Hallie下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。inheritance)と呼ばれるものが原因です。プロトタイプ継承はかなり便利で、あなたは意外と気がつかずに頻繁に使用していると思います!私は視覚学習者なので、GIFアニメで視覚的に説明することで、あなたの手助けをしようと思います。わたし達は多くの場合、同じタイプの多くのオブジェクトを作成する必要があります。犬を閲覧できるサイトがあるとしましょう。すべての犬🐕にその犬をあらわすオブジェクトが必要です。毎回新しいオブジェクトを作成する代わりに、newキーワードを使用してDogインスタンスを作成できるコンストラクタ関数(ES6のclassについては後ほど説明)を使用します(この記事ではコンストラクタ関数についてはあまり説明しないので、ここでは触れません)。すべての犬には名前(name)・品種(breed)・色(color)、そして鳴き声(bark)があります。犬をあらわすオブジェクトDogコンストラクタ関数を作成したとき、作成されるオブジェクトはDogだけではありません。自動的にプロトタイプ(prototype)と呼ばれる別のオブジェクトも作成されます。デフォルトで、このオブジェクトにはconstructorプロパティが含まれており、元のコンストラクタ関数(この場合はDog)を参照できます。コンストラクタ関数(Dog)を作成すると、prototypeオブジェクトも作成される。constructorプロパティは、元のコンストラクタ関数への参照が可能。Dogコンストラクタ関数のprototypeプロパティは列挙できないため、オブジェクトプロパティにアクセスしても表示はされません。存在はしてします!このプロパティオブジェクトがあるのはなぜでしょうか?最初に、表示したい犬をいくつか用意してみます。dog1はブラックのかわいいラブラドールで名前はDaisy、dog2はホワイトのジャックラッセルテリアで名前はJackです😎2匹の犬を定義dog1をコンソールに記録し、プロパティを展開してみました。dog1のログ名前(name)・品種(breed)・色(color)、鳴き声(bark)と、定義したプロパティが表示されましたが、最後に表示された__proto__プロパティとは何でしょう?これは展開されません。オブジェクトのプロパティを取得しようとしても、通常は表示されません。展開して、プロパティを見てましょう😃__proto__を展開Dog.prototypeオブジェクトとまったく同じです!つまり、__proto__はDog.prototypeオブジェクトへの参照です。これがプロトタイプ継承です。コンストラクタの各インスタンスは、コンストラクタのプロトタイプにアクセスできます!🤯インスタンスには__proto__という名前のプロパティも含まれます。これはコンストラクタのプロトタイプ、この場合はDog.prototypeへの参照です。これがクールなのでしょうか?すべてのインスタンスが共有するプロパティがある場合もあります。この場合の関数barkはすべてのインスタンスでまったく同じですが、新しい犬を作成するたびに新しい関数を作成し、そのたびにメモリを消費するのはなぜでしょうか。毎回プロパティのコピーを新しく作成する代わりに、すべてのインスタンスが共有できるプロパティをプロトタイプに追加することで、メモリを節約できます。インスタンスのプロパティにアクセスしようとするたびに、エンジンはまずローカルで検索して、そのプロパティがオブジェクト自体で定義されているかどうかを確認します。アクセスしようとしているプロパティが見つからない場合、エンジンは__proto__プロパティを介してプロトタイプチェーンをたどります。オブジェクトのプロパティにアクセスしようとすると、最初にローカルで検索され、次に__proto_-プロパティを介してプロトタイプチェーンをたどる。上記は1つのステップにすぎませんが、複数のステップを含めることもできます!Dog.prototypeを表示し、__proto__オブジェクトを展開したときに、1つのプロパティも含まれていないことに気がついたかもしれません。Dog.prototype自体は、オブジェクトです。実際にはObjectコンストラクタのインスタンスです。最後に、すべての組み込みメソッドがどこから来たのかという答えがあります。.toString()メソッド。