JavaScriptクラス

📍 1.クラスとは?

関連する変数や関数を組み合わせるときに使用される構文をクラスと呼びます.クラスを使用すると、継承と多形性が生成され、これらはすべてオブジェクト向けの言語である可能性があります.

既存のプロトタイプベースのJSを使いやすくするために、classという文法だけが添加されており、文法糖と呼ばれています.

JavaScriptクラスは、JavaScriptオブジェクト用のテンプレートです.比喩の対象はフナ餅で、等級はフナ餅を作るフレームです.

クラスを使用する理由は、コードを再使用するためにオブジェクト単位でコードをグループ化できるからです.

クラスは関数の一種です.

キーワードclassを使用してクラスを作成します.

📌 インスタンスとオブジェクト

一般関数では、関数を宣言して関数を呼び出して実行するように、クラスの内部機能を使用するには、クラスインスタンスを作成する必要があります.

let 인스턴스 = new 클래스이름();  // 일반적으로 인스턴스를 생성하는 방법

オブジェクト(Object)は、インスタンスの別の名前であり、場合によってはインスタンスまたはオブジェクトと呼ばれます.
インスタンスは主にnew演算子を使用してクラスのエンティティを作成するために使用され、クラスが提供するpropertyとメソッドを使用する場合はオブジェクトと呼ばれます.

1-1. 基本構文と宣言

基本構文

class ClassName {
  constructor() { ... }
}

クラスの作成と使用

例

class Person {
    // constructor
    constructor(name, age){
        // fields
        this.name = name;  
        this.age = age;
        // this 라는 것은, this(생성된오브젝트).name 이라는 것이므로 'seul'이 출력되는 것.
    }
        
    // methods
    speak(){
        console.log(`${this.name}:hello!`);
    }
}

const my = new Person('seul', 15);

console.log(my.age);  // 15
console.log(my.speak());  // seul:hello! <- 이렇게 함수를 호출할 수 있다.

▼▼▼

クラスの作成
(1)classキーワードを用いてPersonクラスを生成する.
(2)constructorを用いて,後でオブジェクトを作成する際に必要なデータを渡す.
(例のクラスには、2つのフィールドとメソッドが含まれています.)
(3)入力されたデータをクラスに存在する2つのフィールド(name,age)に直接割り当てる.

オブジェクトの作成
新しいオブジェクトを作成するときに使用されるキーワードはnewです.

new Person(「sell」,15)を呼ぶと2つのことが起こります.
(1)新しいオブジェクトを生成する.
(2)譲渡された買収とともにconstructorを自動的に実行し、買収はthis.nameとthis.ageに割り当てられる.

クラスに関連するタグ法とオブジェクト文字タグ法には違いがあります.メソッド間にカンマはありません.カンマを付けると文法が間違ってしまいます.

クラスと純関数

クラス式とクラス式、および同じ機能を持つ純粋な関数を比較します.
📌 クラスキーワードを使用して宣言▼

class User {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    alert(this.name);
  }
}

const my = new User("seul");
my.sayHi();

📌 クラスの関数として宣言▼

// 생성자 함수를 만든다.
function User(name) {
  this.name = name;
}
// 모든 함수의 프로토타입은 'constructor' 프로퍼티를 기본적으로 갖고 있으므로
// constructor 프로퍼티를 명시적으로 만들 필요가 없다.

// property에 메서드를 추가한다.
User.prototype.sayHi = function () {
  alert(this.name);
};

let user = new User("lee");
user.sayHi();

▼この2つの方法の結果はほぼ同じだが、違いがある.
(1)クラスは常に厳格モード(use strict)で実行される.
(2)クラスメソッドをリストできません.
(3)classで構成された関数に特殊な内部プログラム[[FunctionKind]]:"classConstructor"を加える.
これもジェネレータを呼び出すときにnew演算子を使用しなければならない理由です.JSエンジンは、関数に[[FunctionKind]:[classConstructor]]がある場合、newとともに呼び出されないとエラーになります.

1-2. クラスの式

Class式はClassを定義する別の方法です.
クラス式には名前を付けることも、名前を持たないこともできますが、名前を持つクラス式の名前はクラス本体のlocalscopeにのみ有効です.簡単に言えば、クラス内でしか使用できません.

// ex.1) 앞에서 본 예제를 표현식으로 바꾸면 이렇게 된다.
let User = class { 
  constructor(name) {
    this.name = name;
  }
  sayHi() {
    alert(this.name);
  }
};
const my = new User("seul");
my.sayHi();

console.log(User.name);  // User



// ex.2) 
let User = class User2{ 
  constructor(name) {
    this.name = name;
  }
  sayHi() {
    alert(this.name);
  }
};
const my = new User("seul");
my.sayHi();

console.log(User.name);  // User2 
console.log(User2);  // ReferenceError: User2 is not defined

▼▼しかしクラスのname属性で見つけることができる.

2. 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) {
       /* if (value < 0){
        *     throw Error('나이는 음수로 설정할 수 없어요!');
        * }   // 이렇게 적을수도 있다. */
    this._age = value < 0 ? 0 : value;
  }
}

const user1 = new User("seul", "lee", -15);
const user2 = new User("eun", "kim", 16);
console.log(user1.age);
console.log(user2.age);

⑪次のuser 1に「エラー」として「sele lee」の年齢「-15」を入力します.
▼ユーザーがうっかり年齢を-に設定した場合、-15を押して出力します.これはオブジェクト向けの概念であり,不適切と考えられる.このようなクラスを使用するユーザー、または私が作成したクラスを理解しました.同僚が間違っていても(何気なく)、まず防御性のあるクラスを作成するのに役立ちます.getterとsetterです.
(1)キーワードgetを用いて値を返し,setを用いて値を設定する.逆に、setは値を設定しているので、値を受け入れる必要があります.(value)
+)ここでthis.ageに設定するとエラーが発生します.

1)  age getterを定義すると、5行目のthis.ageはメモリ内のデータを読み取るのではなく、getterを直接呼び出す.
2)age setterを定義する瞬間、メモリに値を割り当てるのではなくsetterを呼び出す.
3)setter内で渡されたvalueをthis.ageに割り当てると,メモリ値を更新せずにsetter(自己)を繰り返し呼び出す.
4)これを防ぐためには,getterとsetterに書き込まれる変数の名前を少し異なるように設定する必要がある.(年齢2、agePrivate、ageなど

)
(2)このようなUserというクラスには合計3つのフィールドがある.(firstName, lastName, _age)
(3)if文または例は、value;を使用して記述できるようになった.
📌 setはfiledですが、_ageを呼び出し、.ageに値を割り当てることができます.内部でgetterとsetterが使用されているからです.

3. Public & Private

コンストラクション関数を使用せずに_ageを定義できます.ハッシュ記号fieldsを付けるとprivate classフィールドが表示されます.

class Experiment {
    publicField = 2;
    #privateField = 0;
}
const experiment = new Experiment();
console.log(experiment.publicField);  //2
console.log(experiment.privateField);  //undefined 

#は、クラスの内部で値を表示、アクセス、または変更できますが、クラスの外部で値を読み取りまたは変更することはできません.

4. Static

private fieldsではなくクラス関数自体にメソッドを設定することもでき、これを静的メソッドと呼ぶ.prototypeのキーワードを追加できます.
📌 基本構文:static(1)静的方法

class User {
	static staticMethod(){
  	console.log(this === User);
  }
}

User.staticMethod();  // true

静的メソッドは、クラスインスタンスがない場合に呼び出すことができ、クラスがインスタンス化されている場合は呼び出すことができません.(通常、アプリケーションの作成に使用されるユーティリティ関数です.)
特定のクラスインスタンスではなく、クラス「すべて」を作成するために必要な機能です.
(2)静的価格

class Article {
  static publisher = "Hello";
}

alert( Article.publisher );  // Hellod

(例)

class Article {
    
    static publisher = 'Hello!';
    
    constructor(articleNumber) {
        this.articleNumber = articleNumber;
    }

    static printPublisher() {
        console.log(Article.publisher);
    }
}


const article1 = new Article(1); 

console.log(article1.publisher);  // undefined ◀
console.log(Article.publisher);  // 'hello' ◀
Article.printPublisher();  // 'hello'

console.log(article1.articleNumber);  // 1

▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
したがって、static methodName() { ... }のように入力すれば、値を得ることができる.😀
プロトタイプを全く知らないときは、クラスを理解するのは難しいですが、プロトタイプとは何かを知っているので、基礎的な部分でも勉強に役立ちます!
reference
web_club javascript_info MDN