第25章.カテゴリ

類は原型の文法糖ですか?

クラスvsコンストラクション関数

クラス定義

クラス宣言

class Person {};
//익명 클래스 표현식
const Person = class {};
//기명 클래스 표현식
const Person = class MyClass {};

クラスボディで定義できるメソッド

// 클래스 선언문
class Person {
   // constructor
   constructor(name) {
       this.name = name; // name 프로퍼티는 public
   }
   // 프로토타입 메서드
   sayHi() {
       console.log(`Hi! My name is ${this.name}`);
   }
   // 정적 메서드
   static sayHello() {
       console.log('Hello!');
   }
}
// 인스턴스 생성
const me = new Person('Lee');
// 인스턴스의 프로퍼티 참조
console.log(me.name) // Lee
// 프로토타입 메서드 호출
me.sayHi();
// 정적 메서드 호출
Person.sayHello();

関数定義方式:クラスvs構築関数

クラス反発

インスタンスの作成

class Person {}
// 인스턴스 생성
const me = new Person();
console.log(me); // Person {}

方法

1.コンストラクション関数（コンストラクション関数）

class Person {
   // 생성자
   constructor(name) {
       // 인스턴스 생성 및 초기화
       this.name = name;
   }
}

コンストラクション関数vsコンストラクション関数

class Person {
   constructor(name, address) {
       // 인수로 인스턴스 초기화
       this.name = name;
       this.address = address;
   }
}
// 인수로 초기값 전달 --> constructor로
const me = new Person('Lee', 'Seoul') // Lee, Seoul이 consturctor로 전달

2.プロトタイプ方法

3.静的方法

4.静的方法vsプロトタイプ方法

class Square {
   static area(width, height) {
       return width * height;
   }
}
console.log(Square.area(10, 10)); // 100

class Square {
   constructor(width, height) {
       this.width = width;
       this.height = height;
   }
   area() {
       return this.width * this.height;
   }
}
const square = new Square(10, 10);
console.log(square.area()); // 100

5.クラスで定義されたメソッドの特徴

クラスのインスタンス作成プロセス

1.インスタンスを作成してバインドする

2.インスタンスの初期化

3.インスタンスを返す

プロセス

class Person {
   // 생성자
   constructor(name) {
       // 1. 암묵적으로 인스턴스 생성, this에 바인딩
       console.log(this); // Person {}
       // 2. this에 바인딩되어 있는 인스턴스 초기화
       this.name = name;
       // 3. 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환
   }
}

保証する

1.インスタンスの割合

class Person {
   constructor(name) {
       // 인스턴스 프로퍼티
       this.name = name;
   }
}
const me = new Person('Lee');
console.log(me); // Person {name: 'Lee'}

2.訪問者の割合

class Person {
   constructor(firstName, lastName) {
       this.firstName = firstName;
       this.lastName = lastName;
   }
   // 접근자 프로퍼티
   get fullName() {
       return `${this.firstName} ${this.lastName}`;
   }
   // 접근자 프로퍼티 setter 함수
   set fullName(name) {
       [this.firstName, this.lastName] = name.split(' ');
   }
}
const me = new Person('Ungmo', 'Lee');

3.推奨定義クラスフィールド

4.プライベートフィールドの定義を推奨

class Person {
   // private 필드 정의
   #name = '';
   constructor(name) {
       //private 필드 참조
       this.#name = name;
   }
}

public vs private

5.静的フィールドの定義を推奨

class MyMath {
   // static public 필드
   static PI = 22 / 7;
   // static private 필드
   static #num = 10;
   // static 메서드
   static increment() {
       return ++Mymath.#num;
   }
}

拡張クラスを継承する

1.継承クラスと継承コンストラクタ

class Animal {
   constructor(age, weight) {
       this.age = age;
       this.weight = weight;
   }
   eat() { return 'eat'; } // 프로토타입 메서드 eat
   move() { return 'move'; } // 프로토타입 메서드 move
}
// 상속을 통해 Animal 클래스를 확장한 Bird 클래스
class Bird extends Animal {
   fly() { return 'fly'; }
}
const bird = new Bird(1,5);

2.extendsキーワード

// 수퍼 클래스
class Base {}
// 서브 클래스
class Derived extends Base {}

3.動的継承

// 생성자 함수
function Base(a) {
   this.a = a;
}
// 생성자 함수를 상속받는 클래스
class Derived extends Base {}
const derived = new Derived(1);
console.log(derived); // Derived {a : 1}

4.サブクラスの構築関数

5.スーパーキー

1.コール

// 수퍼클래스
class Base {
   constructor(a,b) {
       this.a = a;
       this.b = b;
   }
}
// 서브클래스
class Derived extends Base {
   constructor(a,b,c) {
       super(a,b);
       this.c = c;
   }
}
const derived = new Derived(1,2,3);
console.log(derived); // Derived {a:1, b:2, c:3}

2.参照

// 수퍼클래스
class Base {
   constructor(name) {
       this.name = name;
   }
   sayHi() {
       return `Hi! ${this.name}`;
   }
}
// 서브클래스
class Derived extends Base {
   sayHi() {
       return `${super.sayHi()}. how are you doing?`;
   }
}
const derived = new Derived('Lee');
console.log(derived.sayHi()); // Hi! Lee. how are you doing?

6.継承クラスインスタンスの作成プロセス

// 수퍼클래스
class Rectangle {
   constructor(width, height) {
       this.width = width;
       this.height = height;
   }
   getArea() {
       return this.width * this.height;
   }
   toString() {
       return `width = ${this.width}, height = ${this.height}`;
   }
}
// 서브클래스
class ColorRectangle extends Rectangle {
   constructor(width, height, color) {
       super(width, height)
       this.color = color;
   }
   // 메서드 오버라이딩
   toString() {
       return super.toString() + `, color = ${this.color}`;
   }
}

1.サブクラスのスーパーコール

2.スーパークラスインスタンスを作成し、そのインスタンスをバインドする

3.スーパークラスインスタンスの初期化

4.サブクラス構築関数を返してバインド

5.初期化サブクラスの例

6.インスタンスを返す

7.拡張標準ビルダー関数