[TIL] 2021.02.26

これは黙示波の授業の5日目で、今日はもう黙示波の1週間目の最後の日で、この1週間で多くのことを学びました.どうやって過ぎたのか分かりません.
今日はOOPとPrototypeを勉強する時間がありました今はまだよく理解していませんが、私の理解の範囲内で、簡単に整理してから勉強しましょう.

🔥Today Lesson🔥

OOP(Object Oriented Programming)

Prototype Chain

OOP🏳

OOPはオブジェクト向けプログラミングの略です.
これは,オブジェクト向けプログラミングを意味する.すなわち,OOPは複数のオブジェクトが集まって相互作用する.
OOPを理解するには、基本コンポーネント「オブジェクト」と「クラス」についてある程度理解する必要がありますが、以前はいくつかのロケーションが作成されていました.
簡単に言えば、人々は通常客体と等級を主にフナ餅とフナ餅を撮影する機械と形容し、この表現が最も理解しやすいようだ.😅
フナ餅を印刷する機械はフナ餅を作るフレームを提供した.つまり、フナ餅を撮る機械は「類」と言ってもいいし、それを使って作ったフナ餅はどれも「対象」と言ってもいい.
では、OOPの特性を調べてみましょう.
OOPの特性

カプセル化:カプセル化使用時、内部にどんな機能があるかわからなくても、使い方さえ分かれば、内部を隠して使用することができます.すなわち,隠匿化の特徴を持つ.
例えば、リモコンを使用する場合、リモコン内部にどのような回路があるのか、配置が何なのか分からなくても、操作方法さえ分かれば使用できます.つまり,カプセル化することで不要な情報を隠すことができる.

抽象化:抽象化は、オブジェクトの共通の特徴を見つけて組み合わせることを意味します.
例えば、ウサギ、子犬、ライオン、ゾウというオブジェクトがある場合、これらのオブジェクトの共通点は動物、すなわち、これらのオブジェクトを縛って動物と呼ぶことであり、抽象化である.

継承:継承は親クラスのフィーチャーを子クラスで継承します.継承が必要なのは,不要なコード重複を解消するためである.
例えば、動物と呼ばれるクラスがあり、子犬と呼ばれるクラスを追加的に作成する場合、子犬の本質は動物であると仮定するので、子犬の特徴には動物と共通の特徴があるべきである.このときワンちゃんの特徴をいちいちメモするのではなく、親動物の特徴を継承し、ワンちゃんの付加的な特徴をメモすることを継承と呼びます.

多形性:多形性とは、形状が同じであるが、異なる機能を有することを指す.つまり,親から受け継いだ内容は子で異なる.
例えば、猫類に「泣」を表す関数が定義されていると仮定すると、子類としてネコ科トラ類を作成する場合、猫類は「泣」関数を受け入れて使用することができるが、猫は「ニャー~」と音を立て、トラは「うわっ!声を出す.この場合、多形性を使用して継承関数の値を再定義(overriding)することができます.これを多形性と呼びます.

Javascriptでprototype
JavaScriptにはクラスの概念はありません.したがって、プロトタイプベースの言語と呼ばれ、既存のオブジェクトをコピーすることで新しいオブジェクトを作成します.
理解するために、次のコードを見てみましょう.

function Animal() {
  this.leg = 4;
  this.ear = 2;
  this.eye = 2;
} 

let dog = new Animal()
let cat = new Animal()

console.log(dog.leg) // -> 4
console.log(cat.leg) // -> 4

この場合、dogオブジェクトとcatオブジェクトの作成に伴い、メモリに6つの繰り返し変数が格納される可能性があります.

function Animal() {}

Animal.prototype.leg = 4;
Animal.prototype.ear = 4;
Animal.prototype.eye = 4;

let dog = new Animal()
let cat = new Animal()

console.log(dog.leg) // -> 4
console.log(cat.leg) // -> 4

上のコードと似ているように見えますが、現在のdogとcatオブジェクトの作成に伴い、dogとcatはそれぞれ変数を持たず、Animalオブジェクトのlegプロパティを共有します.これにより、6つの繰り返し変数が格納されるのではなく、同じ作成者によって作成されたオブジェクトが「プロトタイプ」と呼ばれるオブジェクトを共有します.

Prototype Chain🏳

JavaScriptはPrototype Chainを使用してオブジェクトを継承します.オブジェクト上でpropertyを使用するときに希望するpropertyがない場合は、propertypeリンクに沿って親オブジェクトにアクセスします.prototype Chainと呼ばれます.
すべてのオブジェクトが持つprotoプロパティは、親オブジェクトを指します.
コンストラクション関数とは、プロトタイプオブジェクトが持つプロトタイプである生成関数です.
次のコードを見て、Prototype Chainを理解します.

let Person = function(name) {
  this.name = name;
}
Person.prototype.sleep = function() {
  console.log(this.name + "는(은) 자는중입니다...")
}

let kkt = new Person("kkt")

console.log(kkt.sleep);
// -> kkt는(은) 자는중입니다...
//kkt의 참조는 Person
console.log(kkt.__proto__ === Person.prototype);
//kkt의 참조의 참조는 Object
console.log(kkt.__proto__.__proto__ === Object.prototype);
//kkt의 생성자는 Person
console.log(kkt.constructor === Person);

Prototype Chainを使用した継承効果の作成
次に上のコードを使用します.

function Student (name){
  Person.call(this, name) // Person.apply(this, arguments)
}
Student.prototype.learn = function (){
  console.log(this.name + '는(은) 공부중입니다!')
}

let kkj = new Student("kkj")
console.lg(kkj.learn()) // -> kkj는(은) 공부중입니다!
console.lg(kkj.sleep()) // -> kkj는(은) 자는중입니다... 
//Person의 객체를 복사하여 Student에 상속한다. 
Student.prototype = Object.create(Person.prototype);
//상속관계를만들고 constructor를 Student로 할당 해 주지 않으면
//constructor는 Person을 바라보게 된다
console.log(kkj)
// -> ▶ Person {name: "kkj"}
Student.prototype.constructor = Student;
console.log(kkj)
// -> ▶ Student {name: "kkj"}
//Student의 instance를 만든다.
console.log(kkj instanceof Person) // -> true
console.log(kkj instanceof Student) // -> true

上記のコードから分かるように、これを補うためにes 6にはclassが現れ、gangとして表すことができる.
以下の例で説明します.

class Person {
  constructor(name) {
   this.name = name;
  }
  sleep() {
    console.log(this.name + "는(은) 자는중입니다...")
  } 
}

class Student extends Person {
   constructor(name) {
     super(name); // this를 호출해온다. 만일 생성자의 속성이 같다면 생략할 수 도 있다.
   }
   learn() {
     console.log(this.name + "는(은) 공부중입니다!") 
   }
}

let kkt = new Student("kkt")
console.log(kkt.learn()) // -> kkj는(은) 공부중입니다!
console.log(kkt.sleep()) //-> kkj는(은) 자는중입니다...

一日を終える👋

今日勉強しているうちに精神が崩れてしまった.勉強やブログを書く時間がありましたが、私は理解できなかったのでブログを諦めてGoogle化を始め、理解に時間を費やしたようです・・・😅 長い時間がかかりましたが、OOPやClassについてはある程度頭に入っていると思いますので、Besbeesbeesスプレーをしている間にClass部分はFairとコミュニケーションして解決できます.でもまだ原型を理解してないからか次のレッスンではBEESBEESBEESPrototype部分を行い、週末の間にもう一度復習します!🧐🧐🧐