[TIL]OOPとJavaScript Prototype
7927 ワード
午前中はオブジェクト向けプログラミングの内容を自分なりに分析し理解しました.誰もがこのような言葉に賛成しています.自分が初めて直面したことを理解するとき、自分の方法で理解するのが最も効率的です.以前はずっと頭の中を回っていましたが、これは分かりやすい時間です.これはしばらくの間、あなたが理解したように、文字で整理してあなたの理解にどれだけ役に立ちますか.後でTILを書くときは、コンセプトを書くよりも、このコンセプトで知っている内容や、もっと深く知っている内容の方が役に立ちます.
これから書くのは,オブジェクト向けプログラミング方法論に似たJavaScriptのPrototypeに基づくOOPについてまとめる記事である.文章を書く過程では実際の内容と合わないことが多いかもしれませんが、勉強の過程なので、理解の仕方で書けば、いつかもっと熟知した時にこの文章を修正すると信じています.
OOPとJavaScript Prototype
[[Prototype]] = 関数を含むすべてのオブジェクトが持つIntunnelスロット. オブジェクトについては、親の役割を果たすプロトタイプオブジェクトを指し、関数オブジェクトについては プロトタイプ属性 は、関数オブジェクトのみを有するプログラムである. 関数オブジェクトとは、コンストラクション関数として使用される親オブジェクト(プロトタイプオブジェクト)を指します. 関数オブジェクトは、独自のコンストラクション関数ではなくFunction()コンストラクション関数で生成されるため、参照する方法が必要です.
プロトタイプのオブジェクトにはコンストラクション関数があります.自分のオブジェクトを生成すること.元のプロトタイプ(関数オブジェクト名)を指すと考えられます.
この部分はJSを勉強した時に習った内容ですが、もっと詳しく知りました.
オブジェクト内の属性値またはメソッドにアクセスしようとしたときにオブジェクトにアクセスする属性またはメソッドがない場合、JavaScriptは[prototype]が指すリンクに沿って親オブジェクトで検索されます.ない場合は、親オブジェクトの[prototype]を検索します.これは、重複した継承が得られても、すべてのメソッドまたは値にアクセスできることを意味します.
上の図に示すように、メソッドまたはプロパティを順番に検索します.
オブジェクト生成方式は3種類あります.オブジェクト文字(名前の通り、オブジェクト) いずれにしても、Object()コンストラクション関数を使用してオブジェクトが作成されます.
ジェネレータ関数 PersonまたはPeopleはコンストラクション関数であるため、Prototypeプロパティがあります.オブジェクト()ジェネレータ関数 整理中
始まる前に
これから書くのは,オブジェクト向けプログラミング方法論に似たJavaScriptのPrototypeに基づくOOPについてまとめる記事である.文章を書く過程では実際の内容と合わないことが多いかもしれませんが、勉強の過程なので、理解の仕方で書けば、いつかもっと熟知した時にこの文章を修正すると信じています.
OOPとJavaScript Prototype
書く前に、まず用語を理解してスキップして、これからの主な方法として使ったほうがいいと思いますので、文章を書くときはいつも英語の単語の意味を把握してから、文章を書き始めて、今日から決めます.
ちなみに、英語の単語の意味が分からないから書いたわけではありません.堂々とやっているので、これからの理解でもすぐに意味につながります.
Prototype
プロトタイプ
その名の通り、原型は原型です.ある商品を作るとき、最初に作ったテスト製品を原型と呼ぶ理由はこうです.何かを作るためのフレームオブジェクトで、一番初期に作られたものです.基本的に、JavaScriptは、このようなPrototypeに基づくOOPシステムを有する.簡単に言えば、人間最高級のPrototypeはアミノ酸かもしれません.初めて地球を作ったので、生命の始まりの根源はアミノ酸です.
これは簡単にグーグルで持ってきた家譜図です.この絵は原型の概念を理解するのに役立つと思います.上のイメージから見ると、親の間の子供はずっと下に伸びている.下の子の親は上にいて、さらに上へ行くと、曽祖母、曽祖父です.この絵の中で一番上のものは、私自身の最高の祖先になりました.
JavaScriptでこれを見れば上のように表現できるはずなので、全部で3回引き継いだクラスがあるとしましょう.このクラスの名前はわかりませんが、その原型Prototypeを3回上に登ると、一番上のPrototypeが見えます.人は家系図から降りて、祖先の特徴や顔のようになり、Prototypeもそれらの特徴のように受け継がれます.
Prototypeオブジェクト
コードで上の内容をチェックしましょう.const developer = {
name: 'kim',
age : 29
}
console.log(developer.hasOwnProperty('name')); // true
インスタンスを作成しなくても、変数に割り当てることでオブジェクトを作成できるクラスを作成できます.作成したdeveloperオブジェクトは、hasOwnProperty()というメソッドがどこにも見つかりませんが、コンソールの結果を受信できます.
__proto__
のプロパティを持つコンソールウィンドウでオブジェクトを撮影できます.__proto__
にアクセスすると、内部でObject.getPrototypeOf
が呼び出され、プロトタイプオブジェクトが返されます.上の場合、他に継承されているPrototypeはないので、上のObject()プロトタイプが返されます.__proto__
プロパティは、親オブジェクトObjectです.原型を指す.console.log(developer.__proto__ === Object.prototype); // true
オブジェクト(classとfunctionもオブジェクトに含まれます.)生成時に、プロトタイプが決定されます.その後、developer.__proto__ = Person
と入力すると、開発者のプロトタイプがPersonを指すように変更され、親オブジェクトを変更できることを示します.これを使用すると、[ダイナミックに継承可能なオブジェクトを継承](Inherit Dynamic Inheritable Objects)のように[使用](Use)できます.
[[Prototype]] vs prototype property
各オブジェクトには、独自のプロトタイプオブジェクトを指すトンネルスロット(internal slot)があります.関数もオブジェクトなので、Intunnelスロットがあります.ただし、関数オブジェクトは通常のオブジェクトとは異なり、プロトタイプのプロパティもあります.
prototype !== [[prototype]]
どちらもプロトタイプオブジェクトを指しますが、異なります.
const developer = {
name: 'kim',
age : 29
}
console.log(developer.hasOwnProperty('name')); // true
console.log(developer.__proto__ === Object.prototype); // true
__proto__
Function.prototype
を指す.コンストラクタのプロパティ
プロトタイプのオブジェクトにはコンストラクション関数があります.自分のオブジェクトを生成すること.元のプロトタイプ(関数オブジェクト名)を指すと考えられます.
function Dev(name) {
this.name = name;
}
Personジェネレータ関数を作成すると、Personによって作成されたインスタンスのコンストラクション関数がPerson関数になり、Person自身のプロトタイプのコンストラクション関数もPerson関数になります.しかし,Personコンストラクション関数は関数であるため,そのコンストラクション関数はFunctionとなる.ここではFunction()の元のプロトタイプオブジェクトもコンストラクション関数であることがわかります.プロトタイプチェーン
この部分はJSを勉強した時に習った内容ですが、もっと詳しく知りました.
オブジェクト内の属性値またはメソッドにアクセスしようとしたときにオブジェクトにアクセスする属性またはメソッドがない場合、JavaScriptは[prototype]が指すリンクに沿って親オブジェクトで検索されます.ない場合は、親オブジェクトの[prototype]を検索します.これは、重複した継承が得られても、すべてのメソッドまたは値にアクセスできることを意味します.
上の図に示すように、メソッドまたはプロパティを順番に検索します.
オブジェクトの作成方法
オブジェクト生成方式は3種類あります.
const developer = {
name : 'kim'
}
함수 선언식
function Person(){ }
const newPerson = new Person();
//
//
함수 표현식 => 익명함수로 할당해도, 기명함수로 변경됨
const people = function(number){ }
Person.prototype === Person //true
personMaker.prototype === personMaker//true
const newObject = new Object();
Reference
この問題について([TIL]OOPとJavaScript Prototype), 我々は、より多くの情報をここで見つけました https://velog.io/@brian_kim/TIL-OOP와-JavaScript-Prototypeテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol