TIL no.19-JSクラス(クラス)
JavaScript Class
ES 6からJSはClass概念を生み出した.
オブジェクト向けプログラミングで特定のオブジェクトを生成するために変数とメソッドを定義するフレームワーク.
クラス自体にはデータがなく、一度だけ宣言されます.
オブジェクト単位でコードをグループ化し、コードを再使用するための構文を使用できます.
フナ餅を作る場合、フナ餅のマシンフレームはClassで、小豆やクリームを加えて作った小豆フナ餅、クリームフナ餅はObject(対象)です.
クラス宣言
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
// methods
greet() {
console.log(`$this.naem}: hello!`);
}
const jongjin = new Person('jongjin', 30);
console.log(jongjin.name); // jongjin
console.log(jongjin.age); 30
jongjin.greet(); // jongjin: hello!
GetterとSetter
getterはオブジェクトのプロパティを取得する関数です
setterは、オブジェクトの構成を設定する関数です.class User {
constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
get age() { // 값을 리턴
return this._age;
}
set age(value) { // 값을 설정
this._age = value < 0 ? 0 : value;
}
}
const user1 = new User('Kim', 'Jongjin', -1);
User classでage部分エラーを-1と入力した場合、訂正の役割を果たします.
return this._age; 部分的に変数名をageに設定するのは、getとsetを定義した瞬間にthisするためです.ageはgetter、=ageです.setterを呼び出すと、呼び出しスタックエラーが発生します.これを防ぐために、変数名が少し異なります.
このように設定すると、誤って年齢を-1に設定しても、値を再設定して戻ります.
(補足が必要)
継承と多様性
クラス継承は、クラスを他のクラスに拡張できます.
すなわち、既存の機能に基づいて新しい機能を作成することができる.class Shape {
constructor(width, height, color){
this.width = width;
this.height = height;
this.color = color;
}
draw() {
console.log(`draw ${this.color}`)
}
getArea() {
return width * this.height;
}
}
class Rectangle extends Shape {} // 상속
class Triangle extends Shape { // 다양성
draw() {
super.draw(); // override시 부모의 draw() 메서드를 같이 출력하기
console.log('삼각형')
}
getArea() {
return (this.width * this.height) / 2;
}
}
const rectangle = new Rectangle(30, 30, 'yellow');
rectangle.draw();
継承
Shape Classが作成され、Rectangle ClassがShape Classを継承している場合は、Shape Classの機能を直接使用できます.
多様性
継承された機能を少し変更する必要がある場合は、新しいクラスで再定義する必要があります.
Triangle Classを作成すると、getArea()関数を上書きとして再定義できます.上書きする場合は、親の対応するメソッドは使用されませんが、super.draw()メソッドでは、親のdraw()メソッドも一緒に使用できます.
instanceof
前の変数が後のクラスオブジェクトであるかどうかを決定するロールです. console.log(rectangle instanceof Rectangle); // true
console.log(triangle instanceof Rectangle); // false
console.log(triangle instanceof Triangle); // ture
console.log(triangle instanceof Shape); // true
console.log(triangle instanceof Object); // true
最後の三角形instanceofオブジェクトはTrueです.JavaScriptのすべてのクラスがオブジェクトから継承されるからです.
参考講義
エリー
これは明快で起きられない授業で、外国語で講義しても理解できます.おすすめ!!!
Reference
この問題について(TIL no.19-JSクラス(クラス)), 我々は、より多くの情報をここで見つけました
https://velog.io/@playck/TIL-no.-JS-Class
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
// methods
greet() {
console.log(`$this.naem}: hello!`);
}
const jongjin = new Person('jongjin', 30);
console.log(jongjin.name); // jongjin
console.log(jongjin.age); 30
jongjin.greet(); // jongjin: hello!
class User {
constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
get age() { // 값을 리턴
return this._age;
}
set age(value) { // 값을 설정
this._age = value < 0 ? 0 : value;
}
}
const user1 = new User('Kim', 'Jongjin', -1);
class Shape {
constructor(width, height, color){
this.width = width;
this.height = height;
this.color = color;
}
draw() {
console.log(`draw ${this.color}`)
}
getArea() {
return width * this.height;
}
}
class Rectangle extends Shape {} // 상속
class Triangle extends Shape { // 다양성
draw() {
super.draw(); // override시 부모의 draw() 메서드를 같이 출력하기
console.log('삼각형')
}
getArea() {
return (this.width * this.height) / 2;
}
}
const rectangle = new Rectangle(30, 30, 'yellow');
rectangle.draw();
console.log(rectangle instanceof Rectangle); // true
console.log(triangle instanceof Rectangle); // false
console.log(triangle instanceof Triangle); // ture
console.log(triangle instanceof Shape); // true
console.log(triangle instanceof Object); // true
Reference
この問題について(TIL no.19-JSクラス(クラス)), 我々は、より多くの情報をここで見つけました https://velog.io/@playck/TIL-no.-JS-Classテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol