Javascript OOP パート II

こんにちは、Bennison です。このブログでは、OOP が Javascript でどのように機能するかを説明し、それが従来の OOP とどのように異なるかを説明します。この記事を読む前に、OOP の基礎に関する私の以前のブログを読んでください。

プロトタイプとは？

JavaScript では、プロトタイプと呼ばれるものがあります。JavaScript では、すべてのオブジェクトが特定のプロトタイプにリンクされています。したがって、各オブジェクトにはプロトタイプがあります。プロトタイプには、プロパティとメソッドも含まれています。
ここで重要なことは、プロトタイプのメソッドとプロパティがオブジェクトからアクセスできることです。

従来の OOP と Javascript OOP の比較

古典的な OOP では、オブジェクトはインスタンス化と呼ばれるクラスからインスタンス化されます。ここでのクラスは、オブジェクトを作成するための単なる青写真です。
しかし、Javascript では、この用語はまったく異なります。ここで、各オブジェクトは他のオブジェクトとリンクされており、それらのオブジェクトはプロトタイプと呼ばれます。

プロトタイプ継承とは、メソッドを含むプロトタイプと、そのプロトタイプにリンクされたすべてのオブジェクトにアクセスできるプロトタイプを意味します。
オブジェクトはプロトタイプからメソッドとプロパティを継承します。これをプロトタイプ継承と呼びます。この継承は、あるクラスが他のクラスから継承されるクラス継承とは異なります。ただし、この場合は、基本クラスから継承するインスタンスです。
上の画像では、javascript OOP の矢印が上向きになっています。これは、オブジェクトがその動作をプロトタイプに委譲することを意味します。
古典的な OOP では、メソッドはクラスからインスタンス (オブジェクト) にコピーされます。

const numbers = [1, 2, 3, 4,5];
numbers.map((num) => num * 2)

JavaScript の map メソッドを理解するために Google を参照すると、MDN ドキュメントでArray.prototype.map()のように表示されます。

ここで「Array.prototype()」は、JavaScript で作成するすべての配列オブジェクトのプロトタイプです。したがって、すべての配列は map メソッドにアクセスできます。
現在、このプロトタイプオブジェクトには、マップを含むすべての配列メソッドが含まれています。

上記の例では、「Array.Prototype」が数値配列のプロトタイプであり、その数値配列変数がプロトタイプにリンクされています。したがって、「 array.prototype」オブジェクトで定義されているすべてのメソッドにアクセスできます。したがって、上記の例では、配列「number」はメソッドマップを継承します。
Javascript では、プロトタイプの継承を 3 つの方法で実装できます。1 つはコンストラクター関数、2 番目は ES6 クラス、最後の 1 つは Object.Create() メソッドです。

コンストラクター関数は、関数からオブジェクトを作成するために使用されます。これが、Array や map メソッドなどの組み込みオブジェクトの実装方法です。

これは、コンストラクター関数の最新の代替手段です。ES6 クラスは、コンストラクター関数と同じように機能します。ES6 クラスは従来の OOP のようには動作しません。舞台裏では、ES6 クラスはコンストラクター関数で実装されています。

class User {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  getFullName() {
    console.log(this.firstName + ' ' + this.lastName);
  }
}

const user = new User('Bennison', 'J');

console.log(user); // { firstName: 'Bennison', lastName: 'J' }

console.log(user.hasOwnProperty('firstName')); // true
console.log(user.hasOwnProperty('getFullName')); // false

上記の例では、「hasOwnProperty」メソッドを確認できます。これは、プロパティを確認するのに役立ちます。このメソッドは、hasOwnProperty メソッドと呼ばれるオブジェクトの独自のプロパティです。

「object.create()」メソッドは、オブジェクトをプロトタイプオブジェクトにリンクする最も簡単な方法です。

const objOne = {
  firstName: 'Bennison',
  lastName: 'J',
  getFullName: function () {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

const objTwo = Object.create(objOne);

console.log(objTwo); // {}
objTwo.getFullName(); //  Bennison J

「Object.create」メソッドは、プロトタイプを含む空のオブジェクトを返します。プロトタイプは、そのメソッドに渡したものになります。

このブログでは、Javascript のプロトタイプ継承の基本を学びました。上記の例を理解できなくても心配しないでください。今後のブログでこれらの概念について詳しく説明します。このブログを読んでくれてありがとう、またね。

JavaScript OOP (プロトタイプ) #2