JavaScriptのプロトタイプ継承

tl;dr: Understanding Prototypal inheritance, uses & specifics. Composed with code, console & explanatory approach.

Problems are understood crystal clear if seen from a right perspective. 同じ軸上で動く:JavaScriptの継承概念の生物学的展望を考慮する.マイクを父親にしよう👨 ジョーは息子である👦. 生物学として、ジョーは彼の父、マイクの知られていないいくつかの“プロパティ”または“イメージ”を継承します.このイメージまたは「プロパティ」または親オブジェクトから子オブジェクトまで受け継がれる元のコピーのバージョンは、「原型の継承」を意味します.
...
JavaScriptはプロトタイプのベース言語であり、オブジェクトのプロトタイプを継承することができます.JavaScriptはオブジェクトとしての要素です.ネイティブのJSオブジェクトは、プロパティの独自の作り付けのバッグであり、プロパティのこれらの袋は、別のオブジェクトによって継承することができます.例えば、console.log(Array.prototype); //brings all basic properties and methods associated with an Array Object and appends it to Array.prototype.

JSインタビューにおける原型継承関連用語の定義

プロトタイプの継承は、オブジェクトとメソッドを1つのオブジェクトから別のオブジェクトに共有、拡張、コピーできます.

プロトタイプは、プロパティのフォールバックソースとして使用できる別のオブジェクトです.

プロトタイプチェーンはオブジェクトのプロパティのルックアップメカニズムです.オブジェクトのプロパティにアクセスすると、JavaScriptは最初にオブジェクトを検索します.プロパティが見つからない場合、それが見つかるまで(またはそれにもかかわらず)、プロトチェーンまでずっと上昇します.

実践学習のためのコードウォーク
コンストラクタ関数を作成し、プロトタイプが存在するかどうかを確認します.
コンストラクター関数を作成するたびに、プロトタイプと呼ばれるプロパティオブジェクトが自動的に作成され、関数オブジェクト(コンストラクター)に接続されます.
注意:この新しいプロトタイプオブジェクトはまた、ネイティブのJavaScriptオブジェクトを指す、または内部のプライベートリンクを持っています.
以下の例では、コンストラクタ関数を作成します.

function Mike () {
    this.name = 'Mike';
    this.skill = 'JavaScript';
}

//Mike inherits an Object prototype. The "prototype" gets created with function Mike declaration, automatically.

Mike.hasOwnProperty('prototype');
console.log(Mike.prototype);  

//paste above code on console.

The hasOwnProperty() method returns a boolean indicating whether the object has the specified property as its own property (as opposed to inheriting it)~ MDN

2 .関数プロトタイプへのプロパティーの追加.
次の構文は、プロパティとメソッドを関数プロトタイプに割り当てる方法を定義しますSyntax: function_name.prototype.property_name = property_value;

Mike.prototype.putName = function () {
    return 'My name is ' + this.name;
}
console.log(Mike.prototype);  //putName method added to Mike prototype

ここでは、プロトタイプメソッドとして作成されたputNameメソッドは、以前のコンソール出力と比較してみてください.任意の違い?
親から子へのプロパティの継承.
プロパティを継承するための親オブジェクトのインスタンスを作るために“new”キーワードを追加します.
例えば、

var Joe = new Mike();  
console.log(Joe);     //Son(joe) inherits father prototypal properties

舞台裏で、あなたが呼ぶとき:var Joe = new Mike();JavaScriptは実際に以下の操作を行います.

var Joe = new Object();
Joe.[[Prototype]] = Mike.prototype;
Mike.call(Joe);

ブラウザはどのプロパティをどのオブジェクトに属しているのでしょうか?
ブラウザは最初に子オブジェクトのプロパティ(すなわち、自分自身のインスタンスプロパティ)をチェックしていない場合は、継承されたプロトタイプのプロパティを検索し、見つからなかった場合は、オブジェクトのprotoを横切って1つのレベルを継承します.
しかし、protoは何ですか?
包包包は、物体を原型に結びつける内部的性質である.

In layman terms, proto acts as a wormhole that references properties from one Object to another Object, during prototypal chain lookup mechanism.

例えば、

Conside the Prototypal chain built using above code:
// Joe ---> Mike ---> Object.prototype ---> null

なぜ我々はプロトタイプの継承(PI)が必要ですか?
PIは応用に役立つDRY オブジェクトインスタンスの原理.また、親オブジェクトから子オブジェクトへのプロパティプールを内部的に転送するのに役立ちます.したがって、機能分担パターンへの傾き.
...
プロトタイプの継承を扱っている間、いくつかのハウツーを知っています

オブジェクト.Prototypeは様々なブラウザでサポートされており、非常に高速です.それはまた、自然の中で最適化(JIT)コンパイルで最適です.

プロトタイプの継承は、すべてのインスタンスで効果的に共有できるように、親プロトタイプで定義するすべてのプロパティを有効にします.親インスタンスのプロパティの変更は、すべての子インスタンスに自動的に軽減されます.

NULLはプロトタイプを持たないので、プロトタイプのチェーンを終了します.[ P . S :ヌル=オブジェクト]

JavaScriptの関数は常にデフォルトの“プロトタイプ”プロパティを持ちます.矢印関数は既定のプロトタイププロパティを持っていません.

プロトタイプコードの実行コードがパフォーマンス制約の場合、プロトタイプのチェーンのプロパティのルックアップ時間は負の効果を持つことができます.あなたがスコープチェーンに入るほど深く、[プロトタイプ]が再帰的に見えて、より多くの計算上のオーヘッドは起こります.ルックアップ問題を解決するには、hasOwnProperty を使用できます.それはオブジェクトの自身の特性を扱って、検索の後、ブールを返して、全体の原型の鎖を横断しません.開発者として、あなたのプロトタイプのチェーンの長さを意識し、可能なパフォーマンスの問題を避けるために必要に応じてそれらを破る.

オブジェクトを拡張しない.非固有のプロパティを追加するためのプロトタイプです.カプセル化を中断し、“モンキーパッチ”パターンを作成します.

親オブジェクトのコンストラクタの初期化は、子供の不要なメソッドのオーバーロードを置くかもしれません.やりながら気をつけて.

リソースの下からトピックを参照してください.

proto vs prototype

When Not to extend Prototypal chain

Prototype.js

MDN - prototypal inheritance

参照:MDN、スタックオーバーフロー、V 8 -ブログとインターネットブログ.
プロトタイプの継承は、私の最初の記事だった.任意の変更や建設的なフィードバックは非常に歓迎されています.❤️