オブジェクトプロトタイプは何か?5年前のプロトタイプ継承の説明

我々がどのように[[Prototype]] 継承作品とそれが必要とするもの、JavaScriptについての興味深い事実を理解しましょう.
ES 6で書かれたコードを見たことがあるか、反応しても、あなたはES 6に遭遇しそうですclass クラスベースの用語とともにsuper() instanceOf() , and constructor() . これはJavaScriptが伝統的にクラス指向の言語であると思ってあなたを誤解させるかもしれません.

クラス定義

従来のクラス指向言語では、クラスは青写真として機能します.クラスをインスタンス化するとき、クラスは実際にインスタンス(オブジェクト)にコピーされます.サブクラスがスーパークラスを広げるとき、同じ動作が起こります.この行動は、家を建てるためにコピーされている家の青写真の建物計画に類似しています.
を呼び出すと、new キーワード、コピー操作が発生します.
しかしJavaScriptでは、これはそうではありません.授業はない.我々が持っているものは、オブジェクトを「構築する」ために使われる普通の機能です.

function ordinaryFunction () {
  console.log('I am not a class, just an ordinary function');
}

const ords = new ordinaryFunction();

最も重要なのは、'コピー操作'は発生しません.代わりに、新しいオブジェクトが作成されます.この新しいオブジェクトはプロトタイプオブジェクトにリンクされます.

プロトタイプオブジェクトは何ですか？

The [[Prototype]] メカニズムは、ある種のチェーン(原型のチェーン)の他のオブジェクトにオブジェクトをリンクするメカニズムです.この動作はJavaScriptの本質を支えます.

function Foo() {
// ...
}
var b = new Foo();
Object.getPrototypeOf( b ) === Foo.prototype; // true

The getPrototype() staticメソッドのプロトタイプオブジェクトb . ここでは、オブジェクト(B)が実際にfoo.prototype オブジェクト.
徹底的に、コンストラクタ呼び出し時にnew... ) が作成された場合、オブジェクトが作成されます.新しく作成されたオブジェクトは、fn.prototype その連鎖のプロトタイプオブジェクトである.

NOTE: In fn.prototype, the fn is just any function used to make the call. In our case it was Foo. It could also be CalculateHeight, SuccessMessage or any other simple function in your JavaScript.

つまり、new 呼び出しは、新しく作成されたオブジェクトb 内部を得る[[Prototype]] オブジェクトへのリンクFoo.prototype が指している.

function Foo() {
// ...
}

Foo.prototype; // { }

このリンクは何ですか？

本当のクラス指向言語を知っているならば、あなたはクラス継承でクラスのコピーがオブジェクトを構築するのに用いられるということを知っています.しかしながら、JavaScriptの原型の継承で、チェーンの最上位のオブジェクトがチェーンの上でより低いオブジェクトにそのプロパティとメソッドのアクセスを委ねることができるオブジェクトを通して、リンクはつくられます:

fnプロトタイプオブジェクト( AKAプロトタイプオブジェクト)

何かおもしろいことがあります.The fn.prototype オブジェクトには、2つの組み込みプロパティがあります.

function Baz() {
// ...
}

Baz.prototype.constructor === Baz; // true
// Here, the constructor property references the function the prototype object is linked to.

var b = new Baz();

b.constructor === Baz; // true

オブジェクトb はコンストラクタ呼び出しから作成されますBaz 関数.これは疑問を提起します:どのように、それはconstructor プロパティは、オブジェクト内で直接定義されることはありませんでした.答え?経由です[[Prototype]] 代表団.
すべてのオブジェクトプロトタイプbaz.prototype ) ビルトイン付きconstructor プロパティ.したがって、プロトタイプの継承のおかげで、そのプロトタイプオブジェクトにリンクされた他のオブジェクトはnew 構築されたプロパティには、次のようなプロパティに自動的にアクセスできます.

hasOwnProperty()

isPrototypeOf()

propertyIsEnumerable()

toString()

toLocaleString()

hasOwnProperty()

valueOf()

ただし、組み込みのプロトタイプオブジェクトをオーバーライドすることができます.

function Bar() { /* .. */ }
Bar.prototype.constructor = // Bar
Bar.prototype = { /* .. */ }; // overrides the on-built object, assigns a new prototype object

var boo = new Bar();
boo.constructor === Bar; // false!
boo.constructor === Object; // true!

プロトタイプの継承が本当に機能する方法を説明するには、次の例を考えてみましょう

function Foo(title) {
this.title= title;
}

Foo.prototype.myTitle = function() {
return this.title;
};

var a = new Foo( "king" );
var b = new Foo( "queen" );

a.myTitle(); // "king"
b.myTitle(); // "queen"

つの別個のオブジェクトが作成されます.a and b . ここでは、基本的な継承(オブジェクト委譲)がどのように機能するかをまとめます.

両方のオブジェクトがnew , パラメータはコンストラクタ関数(foo)に渡されました.このパラメータは、title 属性付きのthis コンテキストオブジェクトを参照).

あなたは、見つけるのに驚くかもしれないmyTitle() メソッド呼び出しが定義されていないという事実にもかかわらず、a or b . 驚いたなら、これが理由です.

Foo.prototype.myTitle = function() {
return this.title;
};

The myTitle() メソッドをメソッドとしてfoo.protoype オブジェクトは、prototypal chain . 両方ともa and b がなかったmyTitle それらのそれぞれに存在するメソッドは、両方ともプロトタイプオブジェクトにアクセスしているため、それらはリンクされます.それで、彼らがしなければならなかったすべては、登って、そこからそれにアクセスすることでした.
これは基本的にすべてのあなたが知っている必要があります[[Protoype]] JavaScriptの仕組み.これは、オブジェクトのリンクを可能にし、チェーンの形でお互いにアクセスを委譲します.そのように、チェーンの上でより低いオブジェクトはチェーンの上でより高いオブジェクトのプロパティとメソッドへのアクセスを持つことができます.
私たちは5シリーズのように説明の次のエピソードのために残しておきます.
閉じるこの動画はお気に入りから削除されています

How To Solve Any Coding problems with Pseudocode

Explaining Polymorphism to a 5 year old

P/S: If you like articles like this follow this blog to never miss an update. If you are learning JavaScript, you’ll definitely want to check out my JavaScript Notes.