JavaScriptのオブジェクト指向プログラミング(その3 )

最後のポストでは、コンストラクタの機能が実際にどのように機能しているかを説明しました
このポストでは、プロトタイプの概念を使用してメソッドを追加するより良い方法について説明します

プロトタイプとは

プロトタイプがどのように働くかを理解するために、このように新しい配列を作成しましょう

const list = [];

あなたが既に作成したすべてのリストを知らない場合は、組み込みのBlueprint Arrayのインスタンスです

console.log(list instanceof Array) //true

InstanceOfキーワードを使用して、リストが配列のインスタンスであるかどうかをチェックし、それが本当に本当の意味を返します.
これが配列であるので、我々はpushとunshiftのような我々のリストの配列メソッドの全てを使うことができます

list.push(1);
list.push(2);
list.unshift(0);
console.log(list); // [0, 1, 2]

ここで質問があります.リスト内で使用できるすべてのメソッドは、リストオブジェクト自体の中に存在しますか?
答えはノーです.
JavaScript内の任意のオブジェクトでは、メソッド自体はその関数自体に存在しませんが、プロトタイプに存在するため、プロトタイプをオブジェクトメソッドのコンテナまたはホルダーとみなすことができます.
オブジェクトとそのプロトタイプは両方ともリンクされ、JavaScriptが使用しようとする方法を見つける理由について説明します.
あなたが2つのリスト名と年齢を宣言するならば、もう一つの質問です

const names = ["Alex", "Anthony", "Mark"];
const ages = [25, 27, 30];

それぞれのリストは、独自のプロトタイプですか?
再び同じコンストラクタ関数からのすべてのオブジェクトが同じプロトタイプを共有するので、答えは全くありません.

オブジェクトのプロトタイプへのアクセス

うまくいけば、今どのようなプロトタイプが理解し、どのように動作します.
まず、リストのプロトタイプにアクセスしようとしましょう

const list = [1, 2, 3];
console.log(Object.getPrototypeOf(list)); 
// [constructor: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, find: ƒ, …]

//or
console.log(Array.prototype);

// [constructor: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, find: ƒ, …]

JavaScriptでプロトタイプにアクセスできる方法です
あなたは既にそれを推測したかもしれませんが、プロトタイプ自体はオブジェクトであり、どんなオブジェクトのようにも私たちはより多くの方法をそれに加えることができます

プロトタイプへのカスタムメソッドの追加

あなたは、特定のメソッドを文字列や配列に組み込まれるように希望がありますか?さて、あなたはプロトタイプにそれらを追加し、それらを使用することができます.

例

どのように多くの単語を持つ文字列の新しいメソッドを実装しましょう

const myName = "Alex Morgan";

String.prototype.countWords = function () {
  return this.split(" ").length;
};

console.log(myName.countWords()); // 2

そこには、単に文字列コンストラクタ関数からのGraphプロトタイプがあり、通常のオブジェクトのようにメソッドを追加します
このメソッド内のキーワードは、メソッドを呼び出すオブジェクトを常に指すことに注意してください.

プロトタイプ型のカスタマーBluePrintへのメソッドの追加

運動として自分でそれをやってみて

解決策

function Customer(name, email, password, settings, cart) {
  this.name = name;
  this.email = email;
  this.password = password;
  this.settings = settings;
  this.cart = cart;
}

Customer.prototype.setSettings = function (newSettings) {
  this.settings = newSettings;
};

Customer.prototype.orderFood = function (food) {
  console.log(`ordering ${food}`);
};

const customer = new Customer("Alex", "[email protected]", "12", {});

customer.setSettings({ notifications: true });

customer.orderFood("Pizza"); // ordering Pizza

矢印関数の問題

私は矢印関数の代わりに通常の関数スタイルでメソッドを書いたことに注意してください.矢印関数を使用しない場合は、矢印関数がこのキーワードを持っていないためです

すぐれた言葉

このポストを読んでいただき、ありがとうございます.また、プロトタイプをよく理解していただきたいと思います.
これらの記事は有益で有益であり、あなたのフィードバックを提供すること自由に感じている場合、コメントで私に知らせてください.