JavaScriptのプロトタイプ

導入

JavaScriptは、プロパティを使用してプロトタイプを使用するプロトタイプベースの言語、メソッドの検索とコードの再利用性を継承します.このポストの

は、プロトタイプ、プロトタイプチェーンとプロトタイプの継承について学びます.

プロトタイプとプロトタイプチェーン

JavaScriptの

には、2つのタイプのデータがあります
(数字、文字列、boolean )、その他のオブジェクト型(配列、オブジェクトリテラル、関数).

プリミティブ型とオブジェクト型の両方がそれぞれのオブジェクトで包まれます.

の数字はNumberに包まれ、文字列はStringで包まれており、BooleansはBooleanで包まれています.

アレイはArrayで包まれ、オブジェクトはObjectで包まれ、機能はFunctionで包まれます.

これらのラッパーオブジェクトはすべてプロトタイプと呼ばれるプロパティを持っています.

このプロトタイプは、再利用可能なすべてのプロパティ、メソッドを含むオブジェクトであり、親のプロトタイプも持っています.

すべてのラッパーオブジェクトの親はObjectと呼ばれるグローバルオブジェクトです.

プロトタイプによってリンクされたオブジェクトのチェーンをプロトタイプチェーンと呼ぶ.

今、例を使ってプロトタイプチェーンを視覚化しましょう.

このコードはどのように動作しますか?

変数のプロトタイプを取得するには、Object.getPrototypeOf()のメソッドを使用できます.

const arr = [1, 2, 3];

const arrWrapperProto = Object.getPrototypeOf(arr);

console.log(arrWrapperProto); // Array

const objectProto = Object.getPrototypeOf(arrWrapperProto);

console.log(objectProto); // Object

const objectParentProto = Object.getPrototypeOf(objectProto);

console.log(objectParentProto); // null

プロパティ、メソッド検索

プロパティまたはメソッドにアクセスしようとしている場合、最初のJavaScriptは現在のオブジェクトを調べます.

プロトタイプチェーンを使用していない場合は、親オブジェクトで検索します.

プロパティまたはメソッドが見つかったかNULLに達するまで継続します.

これは、プロパティまたはメソッドのルックアップが行われる方法です.

プロトタイプの継承

プロトタイプの主な使用例は、継承によってコードを再利用することです.

とその継承は可能です.

理解する例を挙げましょう.

const person = {
  isTalkative: true,
  talk() {
    console.log("Talking...");
  },
};

const student = {
  name: "John",
  age: 12,
};

Object.setPrototypeOf(student, person);

console.log(student.name); // John

console.log(student.isTalkative); // true

student.talk(); // Talking...

console.log(Object.getPrototypeOf(student) === person); // true

私たちはObject.setPrototypeOf()を使用し、学生のプロトタイプを人として設定します.

これは、学生のプロトタイプが人であることを意味します、あるいは、言い換えれば、学生はプロトタイプ的に人からプロパティとメソッドを継承します.

このため、学生はすべてのプロパティやメソッドにアクセスする必要があります.

上記の例のプロトタイプチェーンを視覚化しましょう.

ここの学生のプロトタイプは人です、人のプロトタイプはObjectであり、プロトタイプはObjectです.

これは、学生がすべてのプロパティとメソッドにアクセスすることを意味します.

同様に、人はObjectからすべての特性と方法にアクセスするでしょう.

オブジェクトの作成

現在、プロトタイプについて学びましたので、プロトタイプを使用して独自のオブジェクトを作成する方法を見てみましょう.

function Student(name, age) {
  this.name = name;
  this.age = age;
}

Student.prototype.isTalkative = true;

Student.prototype.talk = function () {
  console.log("Talking...");
};

const john = new Student("John", 12);

console.log(john.age); // 12

john.talk(); // Talking...

ここでは、学生関数を使ってオブジェクトを構築したり、作成したりする.

コンストラクター関数は、上部キャメルケースをコンストラクターとして識別する必要があるという慣例です.

キーワードは、作成されたオブジェクトを指します.

このキーワードがどのように機能するかについてもっと知りたいなら、私のポストをチェックすることができます.

矢印関数はコンストラクタ関数を作成するために使用できません.

私たちは、すべてのオブジェクトがプロトタイプの継承によってそれらにアクセスできるように、関数のプロトタイプでプロパティとメソッドを設定しています.

キーワードは、コンストラクタ関数を使用してオブジェクトを作成するために使用されます.

メソッドは、オブジェクトリテラルからオブジェクトを作成するために使用されます.

オブジェクトリテラルからオブジェクトを作成する方法を見てみましょう.

const person = {
  isHappy: true,
  introduce() {
    console.log(`Hi I'm ${this.name}`);
  },
};

const john = Object.create(person);

john.name = "John";

console.log(john.isHappy); // true
john.introduce(); // Hi I'm John

console.log(Object.getPrototypeOf(john) === person); // true

Objectはここで、JohnのプロトタイプをPersonオブジェクトとして設定します.

において、クラスがJavaScriptに導入されて、それらはオブジェクトを作成するのに使用されるということに注意してください、しかし、それはちょうど構文の変化です、そして、舞台裏で、それはまだプロトタイプベースの遺産を使用します.

結論

JavaScriptのすべては、プロトタイププロパティを含むラッパーオブジェクトを持っています.

プロトタイプは、すべての再利用可能なプロパティ、その親のプロトタイプと一緒にメソッドを含むオブジェクトです.

プロトタイプチェーンは、プロトタイプによってリンクされたオブジェクトのチェーンです.

JavaScriptは、プロトタイプのチェーンを使用してプロパティとメソッドを検索します.

プロトタイプの継承は、プロトタイプチェーンの親オブジェクトからプロパティとメソッドを再利用する機能です.