JS の __proto__ とプロトタイプの違い

__proto__ と prototype は、JS のプロトタイプに関連する 2 つの属性であり、機能が少し異なります。この記事では、2 つの違いを詳しく紹介して比較し、対応するコード例を示します。

まずは、その意味と使い方を理解しましょう。

proto

__proto__ は、オブジェクトのプロトタイプを指すオブジェクトの組み込みプロパティです。カスタム オブジェクト、組み込みオブジェクト、関数オブジェクトなど、すべてのオブジェクトには __proto__ 属性があります。 __proto__ 属性を通じて、オブジェクトのプロトタイプ チェーンにアクセスして操作できます。

例を見てみましょう:

let obj = {};
console.log(obj.__proto__); // 输出：Object {}

let arr = [];
console.log(arr.__proto__); // 输出：Array []

function func() {}
console.log(func.__proto__); // 输出：[Function]

上記のコードでは、空のオブジェクト obj を作成し、その __proto__ 属性にアクセスしました。ご覧のとおり、obj.__proto__ は Object{} オブジェクトを指します。同様に、空の配列 arr も作成し、その __proto__ 属性にアクセスすると、arr.__proto__ が Array[] オブジェクトを指すようになります。関数オブジェクト func の場合、その __proto__ は [Function] オブジェクトを指します。

要約すると、__proto__ 属性はオブジェクトのプロトタイプを指すために使用され、これを通じてプロトタイプ チェーンにアクセスして操作できます。

prototype

prototype は関数オブジェクトの一意の属性であり、プロトタイプ オブジェクトを指します。すべての関数オブジェクトにはプロトタイプ属性がありますが、これは関数がコンストラクターとして使用される場合にのみ意味を持ちます。

例を見てみましょう:

function Person() {}

console.log(Person.prototype); // 输出：Person {}

上記のコードでは、Person 関数オブジェクトを定義し、そのプロトタイプ属性にアクセスします。ご覧のとおり、Person.prototype は Person{} オブジェクトを指します。

プロトタイプ属性の主な役割は、コンストラクター モードでインスタンス オブジェクトのプロトタイプ チェーンを構築することです。コンストラクターを使用してオブジェクトを作成する場合、その __proto__ 属性はコンストラクターのプロトタイプ属性を指します。

let person = new Person();

console.log(person.__proto__ === Person.prototype); // 输出：true

上記のコードでは、person コンストラクターを使用してオブジェクト person を作成します。 person.__proto__ が person.prototype を指していることがわかります。

違いとつながり

__proto__ とプロトタイプはオブジェクトのプロトタイプに関連しており、それらの間のつながりと違いは次のとおりです:

1. __proto__ はインスタンスですobject 属性はオブジェクトのプロトタイプを指すために使用され、prototype はコンストラクターの属性であり、コンストラクターのプロトタイプ オブジェクトを指すために使用されます。
2. __proto__ は、オブジェクトのプロトタイプ チェーンを読み取ってアクセスする属性であり、インスタンス オブジェクト上で直接アクセスできます。prototype はコンストラクターの属性であり、コンストラクター内でのみアクセスできます。
3. __proto__ は Object.setPrototypeOf() または直接割り当てを通じて変更できますが、プロトタイプは関数 name.prototype を通じてコン​​ストラクター内でのみ変更できます。
4. __proto__ は非標準属性であり、一部のブラウザでのみサポートされています。prototype は標準属性であり、すべてのオブジェクトと関数がそれを持ちます。

次のコード例は、この 2 つの違いと関係をさらに説明するために使用されます。

function Animal() {}
Animal.prototype.eat = function() {
  console.log("Animal is eating");
};

function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.bark = function() {
  console.log("Dog is barking");
};

const dog1 = new Dog();
dog1.eat(); // 输出：Animal is eating
dog1.bark(); // 输出：Dog is barking

console.log(dog1.__proto__ === Dog.prototype); // 输出：true
console.log(Dog.prototype.__proto__ === Animal.prototype); // 输出：true

上記のコードでは、継承を定義することによって、Animal コンストラクターと Dog コンストラクターを作成します。関係。 __proto__ 属性とプロトタイプ属性を通じて、オブジェクトのプロトタイプ チェーンにアクセスし、それらの間の接続を証明できます。

要約すると、__proto__ とプロトタイプはどちらも JS のプロトタイプに関連しますが、機能と使用法が異なります。それらの違いを理解することは、JS のプロトタイプのメカニズムをより深く理解し、コードを記述するときにそれらをより柔軟に利用するのに役立ちます。

以上がJS の __proto__ とプロトタイプの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。