TIL] Deep Dive-Class

🌼 25.2クラス定義

クラスはclassキー定義を使用します.クラス名はコンストラクション関数と同様に、通常パスカルパッケージが使用されます.classは、構造関数のように宣言形式または式形式で表現することができる.このように定義されたクラスはコンストラクション関数であり、new演算子とともに呼び出してインスタンスを生成します.

//클래스 선언문
class Person {};

//익명 클래스 표현식
const Animal = class {};

//기명 클래스 표현식
//인스턴스를 생성하려면 클래스를 가리키는 식별자를 사용해야 한다.
//MyClass는 클래스 몸체 내부에서만 유효한 식별자다.
const Vegetable = class MyVegetable {};

클래스를 표현식으로 표기가 가능レベルが値として使えることを意味する일급 객체

クラスマスターは、0つ以上のメソッドを定義できます.

constructor(생성자):인스턴스를 생성하고 초기화하기 위한 특수 메서드コンストラクタの内部では、このアイテムに追加されたPropertyがインスタンスのPropertyになります.このとき、コンストラクタのthisはクラスが作成したインスタンスを指します.

プロトタイプメソッドのコンストラクション関数とは直接関係なく、コンストラクション関数は関数オブジェクトコードの一部のようにメソッドとして解釈されません.

コンストラクタは省略可能で、コンストラクタを省略するクラスはコンストラクタによって空のオブジェクトを生成します.

컨스트럭터는 별도의 반환문을 갖지 않으며 new 연산자를 통해 클래스가 호출되면 암묵적으로 this를 반환한다.

프로토타입 메서드:コンストラクション関数と違いprototypeというキーワードがない클래스 몸체제 정의된 메서드는 기본적으로 프로토타입 메서드로 동작

function 키워드를 생략한 메서드 축약 표현을 사용

정적메서드 : 메서드에 static 키워드를 붙이면 정적 메서드가 된다 . 静的メソッドは、インスタンスとは異なり、特別な作成プロセスを必要とせず、インスタンスではなくクラスを呼び出す必要があります.

静的メソッドとプロトタイプメソッドは異なるプロトタイプチェーンに属する.

정적 메서드는 인스턴스 프로퍼티를 참조할 수 없지만 프로토타입 메서드는 인스턴스 프로퍼티를 참조할 수 있다.

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

1.인스턴스 생성과 this 바인딩:newキーワードでclassを呼び出すと、デフォルトの空のオブジェクトが生成され、生成されたインスタンスがバインドされます.
2.인스턴스 초기화:ビルダー内部コードを起動し、インスタンスにpropertyなどを追加し、生成したインスタンスを初期化する.
3.인스턴스 반환:クラスのすべての処理が完了すると、バインド完了インスタンスのthisがデフォルトで返されます.

🌼 25.7%

プライベート、パブリック、保護されたキーワードなどのアクセス制限は、他のオブジェクト向け言語のようにサポートされていません.したがって、インスタンスは常に公開される.

外部値を使用してインスタンスを初期化する必要がある場合は、コンストラクション関数の内部でthisキーを使用して初期化する必要があります.

外部値を使用せずにクラスボディにクラスフィールドを定義する場合は、クラスフィールドをバインドする必要がなく、クラスフィールドに初期値を指定することもできます.(現在は正式な標準仕様にアップグレードされていませんが、最新のブラウザnode.jsはアクティブに実施されています.)

클래스 필드에 메서드도 할당할(함수 선언) 수 있으나 이는 프로토타입 메서드가 아닌 함수의 프로퍼티로 동작하므로 클래스필드에 함수를 할당하는 것은 권장하지 않는다.

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

JavaScriptはパッケージングを完全にサポートしていないため、他のオブジェクト言語向けの制限されたアクセスキーはサポートされていません.しかし、新しい標準仕様が提案されているため、以下のキーワードを先制的に使用することができる.

privateフィールドの前に#を付け、参照時にも#を付けてprivateアクセス制限者のように使用できます.これによりprivateと宣言されたフィールドはクラス内でのみ参照できます.ただし、訪問者プログラムで間接的にアクセスできます.

class Animal {
  //private 필드는 클래스 몸체에 정의해야 한다.
  //초기값을 정의하지 않으면 undefined를 갖는다.
  #age = 0;
  constructor(age) {
    this.#age = age;
  }

  //접근자 프로퍼티로 프로퍼티를 읽을 수 있다.
  get age() {
    return this.#age;
  }
  
  //접근자 프로퍼티로 프로퍼티 값을 변경할 수 있다.
  set age(newAge) {
    this.#age = newAge;
  }
}

let animal = new Animal(10);

console.log(animal.age); // 10
//접근자 프로퍼티는 함수 선언문 형태이지만 프로퍼티를 다루는 것처럼 사용한다.
animal.age = 20;
console.log(animal.age); // 20

🌼 25.8拡張クラスの継承

継承によるクラス拡張では、既存のクラスを継承することによって拡張する構文が基本的に提供されますが、コンストラクション関数はそうではありません.기존 클래스를 상속받아 새로운 클래스를 확장(extends)하여 정의하는 것이다.

extendsキーワードはクラスを継承するだけでなく、コンストラクション関数を継承してクラスを拡張することもできます.

継承するオブジェクトを動的に決定することでクラスを拡張することもできます.

🌼 25.8.5スーパーキーワード

スーパーキーワードは特殊なキーワードで、関数のように呼び出すことも、この識別子のように参照することもできます.

상속으로 확장된 클래스를 서브 클래스 또는 자식 클래스라고 부르고 서브 클래스에 상속된 클래스를 수퍼 클래스 또는 부모 클래스라고 부른다.:superを呼び出すとスーパークラスのビルダーを呼び出す.

//수퍼 클래스
class Base {
  constructor(a, b) {
    this.a = a;
    this.b = b;
  }
}

//서브 클래스
class Derived extends Base {
  constructor(a, b, c) {
    //서브 클래스에서 컨스트럭터를 생략하지 않는 경우, 반드시 super를 호출해야 한다.
    //super 키워드는 반드시 서브클래스 컨스트럭터 안에서만 호출해야 한다.
    super(a, b);
    //super를 호출하기 전에는 this 키워드를 사용할 수 없다.
    this.c = c;
  }
}

const derived = new Derived(1, 2, 3);
console.log(derived) //Derived {a: 1, b: 2, c: 3}

・super 호출:スーパークラスを参照し、サブクラスメソッド内でスーパークラスシードを呼び出すことができます.メソッドサムネイルで定義された関数のみがHomeObjectを持つためsuperを参照できることに注意してください.

出典:モダンJavaスクリプトDeep Dive-李雄模