JavaScriptでのプロトタイプとプロトタイプチェーンのコード説明

この記事は JavaScript のプロトタイプとプロトタイプチェーンのコードの説明です。必要な方は参考にしていただければ幸いです。

多くのフロントエンド開発者にとって、JavaScript のプロトタイプとプロトタイプ チェーンは比較的わかりにくい点です。そのため、この記事はこの点についての私の理解を記録し、将来的にはより深い理解に基づいて更新する予定です。

オブジェクト

プロトタイプとプロトタイプ チェーンを理解したい場合は、まずオブジェクトとは何かを理解する必要があります。オブジェクト指向プログラミング (OOP) は、現在主流のプログラミング パラダイムであり、さまざまな複雑な関係を複数のオブジェクトに抽象化し、それらを分割および連携させて実環境のシミュレーションを完了します。したがって、オブジェクトは単一の物理オブジェクトを抽象化したものであり、抽象化によって得られたオブジェクトはプロパティとメソッドを備えたコンテナになります。たとえば、生徒を Student オブジェクトに抽象化した場合、属性を使用して生徒がどの学年 (中学 1 年、高校 1 年など) を記録することができ、メソッドを使用して次のことができます。生徒の特定の行動 (勉強、遊びなど) を表すために使用されます。

コンストラクター、インスタンス オブジェクト、および継承

オブジェクト指向プログラミングを使用する場合、最初のタスクはオブジェクトを生成することです。 JavaScript では、コンストラクターは特にインスタンス オブジェクトを生成するために使用されます。コンストラクターは、すべて同じ構造を持つ複数のインスタンス オブジェクトを生成できます。

var Student= function () {
  this.age= 18;
};

var s = new Student();
s.age// 18

特別な注意が必要です:

• 上記のコードでは Student がコンストラクターですが、通常の関数と区別するために、その名前は大文字にする必要があります。

• this キーワードは関数本体内で使用され、生成されるオブジェクト インスタンスを表します。

• #オブジェクトを生成するときは、新しいコマンドを使用する必要があります。 new のみが新しいインスタンス オブジェクトを生成します。

new コマンドを使用して新しいインスタンス オブジェクトを生成するだけでなく、Object.create() を使用してインスタンス オブジェクトを作成することもできます。このメソッドは、インスタンス オブジェクトを取得する方法がない場合に適しています。コンストラクターですが、既存のオブジェクトにしかアクセスできません。

var student1 = {
    name:'Solar',
    age:18,
    greeting:function(){
        console.log('Hello!');
    }
};
var student2 = Object.create(student1);
student2.name//Solar
student2.greeting()//Hello!

上記のコードでは、Object.create メソッドは Student1 オブジェクトをプロトタイプとして取得し、student2 オブジェクトを生成します。 Student2 は Student1 のすべてのプロパティとメソッドを継承します。

プロトタイプ オブジェクト (プロトタイプ)

まず、なぜプロトタイプ オブジェクト (プロトタイプ) が存在するのかを理解しましょう。

function Student(name, age) {
  this.name = name;
  this.age = age;
  this.greeting = function(){
    console.log('Hello!');
  }
}

var student1= new Student('Solar', '18');
var student2 = new Student('Moonbyul', '17');

student1.greeting=== student2.greeting
// false

上記のコードからわかるように、コンストラクターを通じてインスタンス化されたオブジェクトには挨拶メソッドがありますが、このメソッドはそれ自体のインスタンス オブジェクトごとに、つまりインスタンスが生成されるたびに生成されるため、新しい挨拶メソッドが作成されます。しかし実際には、挨拶メソッドは同じであり、挨拶メソッドを複数回生成してリソースを無駄にする必要がないため、JavaScript プロトタイプ オブジェクトが誕生しました。 JavaScript では、各関数がオブジェクトを指すプロトタイプ属性を持つことを規定しています。

function Animal(name) {
  this.name = name;
}
Animal.prototype.color = 'white';
var cat1 = new Animal('大毛');
var cat2 = new Animal('二毛');
cat1.color // 'white'
cat2.color // 'white'

上記のコードでは、コンストラクター Animal のプロトタイプ属性は、インスタンス オブジェクト cat1 および cat2 のプロトタイプ オブジェクトです。プロトタイプ オブジェクトに color 属性を追加します。その結果、すべてのインスタンス オブジェクトがこの属性を共有します。

プロトタイプ オブジェクトのプロパティは、インスタンス オブジェクト自体のプロパティではありません。プロトタイプ オブジェクトを変更すると、その変更はすべてのインスタンス オブジェクトに即座に反映されます。

Animal.prototype.color = 'yellow';
cat1.color // "yellow"
cat2.color // "yellow"

インスタンス オブジェクト自体に特定のプロパティまたはメソッドがある場合、プロトタイプ オブジェクト内でそのプロパティまたはメソッドは検索されません。

cat1.color = 'black';
cat1.color // 'black'
cat2.color // 'yellow'
Animal.prototype.color // 'yellow';

プロトタイプ チェーン (プロトタイプ チェーン)

JavaScript では、すべてのオブジェクトが独自のプロトタイプ オブジェクト (プロトタイプ) を持つことを規定しています。一方で、任意のオブジェクトは他のオブジェクトのプロトタイプとして機能できますが、他方では、プロトタイプ オブジェクトもオブジェクトであるため、独自のプロトタイプもあります。したがって、「プロトタイプ チェーン」が形成されます。オブジェクトからプロトタイプ、そしてプロトタイプのプロトタイプ...

層ごとに遡っていけば、最終的にはすべてのオブジェクトのプロトタイプがオブジェクトにたどり着くことができます。 .prototype、つまり、Object コンストラクターのプロトタイプ プロパティ。つまり、すべてのオブジェクトは Object.prototype のプロパティを継承します。 Object.prototype のプロトタイプは null です。 null にはプロパティやメソッドがなく、独自のプロトタイプもありません。したがって、プロトタイプ チェーンの最後は null になります。

以上がJavaScriptでのプロトタイプとプロトタイプチェーンのコード説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。