プロトタイプ

本稿では、JavaScriptのプロトタイプを説明し、どのようにフードの下で動作します.多くの場合、JavaScriptに新しい開発者は、この魔法のキーワードとは何かを定義することはありませんいくつかのメソッドへのアクセスを与えるか?プロトタイプが何であるかについて突き止めましょう.

JavaScriptプロトタイプ入門
デフォルトでは、javascriptはobject ()関数を提供します.コンソールで印刷することで確認できます.

console.log(Object);

出力:

object ()はオブジェクトのようですが、オブジェクトではなく関数です.ちょっと混乱しているかもしれませんが、object ()は関数であり、プロトタイプのキーワードを使って参照できる匿名オブジェクトを提供しています.

console.log(Object.prototype);

出力:

このオブジェクト.プロトタイプオブジェクトには、toString ()やvalue ()などの定義済みのメソッドがあります.JSでは、関数がオブジェクトのプロパティの値である場合、メソッドと呼ばれます.
オブジェクトのコンストラクタです.次に、プロトタイプ関数を参照します.

例を使ってよりよく理解しましょう.プログラマと呼ばれるコンストラクタ関数を定義しましょう.

function Programmer(name, language) {
this.name = name;
this.language = language;
}

上記のコンストラクター関数は、名前と言語をパラメータとして受け取り、名前と言語のプロパティにそれぞれ割り当てます.場面の後ろで、jsは新しい関数programmat ()と匿名のオブジェクトをつくります.

Object関数の場合に以前に見たものと似ていますが、このprogramm ()関数には、無名オブジェクトを参照するプロトタイプとコンストラクタが参照されます.
コンソールの両方で印刷し、出力を見ましょう.

console.log(Programmer);

出力:

console.log(Programmer.prototype);

出力:

プログラマーから得たオブジェクトを観察できます.プロトタイプは、プログラマ関数自体を参照するコンストラクターを持っています.これに加えて、jsはプログラマをリンクします.プロトタイプからオブジェクトへ.プロトタイプを介してプロトタイプ[プロトタイプ].
イメージをよりよく理解するのに役立ちます.


JavaScriptプロトタイプでのカスタムメソッドの定義
プロトタイプオブジェクトで独自のカスタムメソッドを定義できます.これらのカスタム関数は、さらにその関数から作成されたインスタンスにアクセスできます.
次のコードは、プログラマに対してInter ()という新しいメソッドを定義します.プロトタイプ

Programmer.prototype.intro = function() {
    return "Hello, My name is " + this.name + " and I am a " + this.language + " Developer";
}

このlogin ()関数はプログラマに追加されます.プロトタイプオブジェクト.

さて、プログラマのインスタンスを作成しましょう

let p = new Programmer('Jay', 'Python');

JSは現在、新しいオブジェクトPとプログラマへのリンクを作成します.プロトタイプリンクによるプロトタイプオブジェクト
では、このPインスタンスからINI ()関数を呼び出しましょう.

let introduction = p.intro();
console.log(introduction);

出力:

これはどうやって動くの?
Pは独自のINF ()メソッドを持っていないので、JavaScriptはプロトタイプリンクに従ってプログラマにそれを見つけます.プロトタイプオブジェクトとそれを実行します.

では、pオブジェクトのtoString ()メソッドを呼び出します.

let pString = p.toString();
console.log(pString);

これはどうやって動くの?
また、pが独自のtoString ()メソッドを持っていないため、JavaScriptはプロトタイプリンクに従ってプログラマに対して検索を行います.プロトタイプオブジェクト.プログラマだから.プロトタイプはtoString ()メソッドを持っていません.また、プロトタイプのリンケージに従ってオブジェクトを検索します.プロトタイプオブジェクト.これはtostring ()を見つけて実行します:

プロトタイプリンケージ、すなわちプログラマに存在しないメソッドを呼び出す場合.プロトタイプまたはオブジェクト.その後、JavaScriptは、指定されたメソッドを見つけることができないエラーをスローします.

p.changeProfession();

changeprofession ()プロトタイプチェーンのオブジェクトのいずれかには存在しません.JavaScriptはエラーをスローします.

Qという別のインスタンスを作成しましょう.

const q = new Programmer('Raj', 'Javascript');

さて、PとQの両方のオブジェクトは同じオブジェクトとプロパティを持っています.しかし、Qでもう一つの方法を定義するならば、どうですか?Pはそれにアクセスすることができますか?
このメソッドは、qオブジェクトのメソッドgetsalary ()を定義します.

q.getSalary = function () {
    return "My salary is decent.";
}

このGetSalary ()メソッドは、プログラマではなくQオブジェクトだけに追加されます.プロトタイプまたはp.

getsalary ()関数をpと呼びます.

dunder proto
プロトはdunder protoと発音される.Protoはオブジェクトのアクセサプロパティです.プロトタイプオブジェクト.それは、それがアクセスされるオブジェクトの内部のプロトタイプリンケージ([[プロトタイプ]])を公開します.
P . Protoはプログラマを参照する[[プロトタイプ]]を公開します.プロトタイプオブジェクト.

console.log(p.__proto__ === Programmer.prototype); // true
console.log(p.__proto__ === q.__proto__); // true

ただし、オブジェクトを使用する必要があります.proprotot ()の代わりにgetprototyPeople ()メソッドです.オブジェクト.指定したオブジェクトのプロトタイプを返します.

console.log(p.__proto__ === Object.getPrototypeOf(p)); // true

オブジェクトのときにプロトタイプリンケージを取得する別の一般的な方法.GetPrototyPeople ()メソッドは以下のようにコンストラクタプロパティを使用しません.

p.constructor.prototype

角p.constructor したがって、プログラマはp.constructor.prototype を返します.

遮光
次のメソッド呼び出しを参照してください.

console.log(p.intro());

PオブジェクトにはINI ()メソッドが定義されていません.したがって、JavaScriptはプロトタイプチェインに移動してそれを見つけることができます.この場合、プログラマのメソッドを見つけることができます.プロトタイプオブジェクト.
プログラマのメソッドと同じ名前のオブジェクトPに新しいメソッドを追加しましょう.プロトタイプオブジェクト

p.intro = function() {
    console.log('Hello');
}

を呼び出した.

console.log(p.intro());

PオブジェクトはInter ()メソッドを持っているので、JavaScriptはプロトタイプチェーンでそれを見ずにすぐに実行します.
これはシャドーイングの例です.PオブジェクトのInter ()メソッドは、Pオブジェクトが参照するプロトタイプオブジェクトのInter ()メソッドをシャドウします.