カテゴリ

📚 Reference
javascript.info, https://ko.javascript.info/class
注意:これは個人がサイトで復習しやすいように再編成された文章です.
詳細については、リファレンスサイトにアクセスしてください.
緒論
クラスは、オブジェクト向けプログラミングで特定のオブジェクトを作成するための変数とメソッドを定義するフレームワークであり、オブジェクトのステータスとメソッドを定義するために使用されます.
実際の操作では、ユーザーやアイテムなど、同じタイプのオブジェクトを複数作成する必要があることがよくあります.この場合、new演算子とコンストラクション関数を使用して、同じオブジェクトを簡単に作成できます.
また、JavaScriptは、ES 6で導入されたクラス構文を使用することで、オブジェクト向けプログラミングで使用されるさまざまな機能を提供しています.
基本構文
次のデフォルト構文を使用してクラスを作成できます.

class MyClass {
  // 여러 메서드를 정의할 수 있음
  constructor() { ... }
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}

このようにクラスを作成し、new MyClass()を呼び出すと、内部定義されたメソッドを含むオブジェクトが作成されます.
オブジェクトのデフォルト状態を設定するコンストラクション関数メソッドconstructor()は、newによって自動的に呼び出され、特別なステップを必要とせずにオブジェクトを初期化できます.

class User {

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

  sayHi() {
    console.log(this.name);
  }

}

const user = new User('Tomas');
user.sayHi(); // Tomas 

呼び出しnew User('Tomas')では、次のことが起こります.

新しいオブジェクトが作成されます.

constructor()は、買収とともに自動的に実行されます.

買収'Tomas'はthis.nameに割り当てられた.

このプロセスの後、user.sayHi()のようなオブジェクトメソッドを呼び出すことができる.

メソッド間にカンマはありません.
初心者はクラスメソッドの間にカンマをつけるミスをよく犯す.このようにカンマを付けると文法が間違ってしまいます.
クラスに関連する記号は、オブジェクトの文字記号とは異なります.クラスはメソッド間にカンマを付ける必要はありません.
等級は何ですか.
クラスはJavaScriptで新しく作成されたオブジェクトではありません.JavaScriptでは、クラスは関数のタイプです.

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

  sayHi() {
    console.log(this.name);
  }
}

// 클래스는 함수입니다.
console.log(typeof User); // function

// 정확히는 생성자 메서드와 동일합니다.
console.log(User === User.prototype.constructor); // true

// 클래스 내부에서 정의한 메서드는 User.prototype에 저장됩니다.
console.log(User.prototype.sayHi); 
// sayHi() {
//   console.log(this.name);
// }

// 현재 프로토타입에는 메서드가 두 개입니다.
console.log(Object.getOwnPropertyNames(User.prototype)); 
// constructor, sayHi

class User {...}構文構造の作業は次のとおりです.

Userという名前の関数を作成します.関数の本文は、関数を構築する方法constructor()から来ている.コンストラクション関数メソッドがない場合は、本文が空の場合に関数が作成されます.

同じクラスで定義された方法sayHi()がUser.prototypeに保存される.

new Userを呼び出してオブジェクトを作成し、オブジェクトのメソッドを呼び出すと、関数のprototype Propertyで説明したように、プロトタイプからメソッドがインポートされます.このプロシージャを使用すると、オブジェクトからクラスメソッドにアクセスできます.
クラスは簡単な文法ではありません.
一部の人は、クラスは単純な文法にすぎないと言っています.キーワードclassがなければ、クラスとしての関数を宣言することができるからです.なお、機能は同じであるが、既存の文法を読みやすくする文法を便利文法(文法糖、文法糖)と呼ぶ.

// class User와 동일한 기능을 하는 순수 함수를 만들어보겠습니다.

// 1. 생성자 함수를 만듭니다.
function User(name) {
  this.name = name;
}

// 2. prototype에 메서드를 추가합니다.
User.prototype.sayHi = function() {
  console.log(this.name);
};

const user = new User("Tomas");
user.sayHi(); // Tomas

上記の例に示すように、classキーワードを使用する方法と、純粋な関数を使用してクラス関数を宣言する方法の結果はほぼ同じです.classは簡単な文法だと思います.
しかし、2つの方法にはいくつかの重要な違いがあります.

classによって作成された関数では、特殊な内部property [[FunctionKind]]:"classConstructor"がラベルのように貼り付けられます.JavaScriptは、関数に[[FunctionKind]]:"classConstructor"があるかどうかを確認するために、さまざまな方法を使用します.クラスジェネレータがnewとともに呼び出されない場合、エラーが発生します.

クラスメソッドをリストできません.クラスのprototypeに追加されたメソッドの総数はenumerableであり、falseと表記されている.

for..inを使用してオブジェクトを巡回する場合、この機能は、通常、方法が巡回ターゲットから除外されることが望ましいため、非常に有用である.

クラスは常に厳格なモードで実行されます.厳格モードは、クラスジェネレータ内のすべてのコードに自動的に適用されます.

クラスフィールド
クラス(Class)フィールドという構文を使用して、クラスに任意のタイプのプロパティを追加できます.Userクラスにnameのパーセントを追加しましょう.

class User {
  name = "Tomas";

  sayHi() {
    console.log(`Hello, ${this.name}!`);
  }
}

new User().sayHi(); // Hello, John!

クラスを定義する場合は、<コンフィギュレーション名>=<値>を使用してクラスフィールドを作成できます.
クラスフィールドの重要な特性の1つは、User.prototypeではなく個別のオブジェクトにのみクラスフィールドを設定することです.

class User {
  name = "Tomas";
}

const user = new User();
console.log(user.name); // Tomas
console.log(User.prototype.name); // undefined

また、クラスフィールドでは、複雑な式または関数を使用して結果を呼び出すことができます.

class User {
  name = prompt("이름을 알려주세요.", "Tomas");
}

const user = new User();
console.log(user.name); // Tomas

クラスフィールドにバインドする方法の作成
JavaScriptの関数には、動的なthisがあります.したがって、オブジェクトメソッドがまったく異なるコンテキストで呼び出されると、thisは元のオブジェクトを参照しません.
関連例を見てみましょう.例を実行すると、undefinedが出力されます.

class Button {
  constructor(value) {
    this.value = value;
  }

  click() {
    console.log(this.value);
  }
}

const button = new Button("hello");

setTimeout(button.click, 1000); // undefined

このようにthisのコンテキストが未知になる問題を「失われたthis」と呼ぶ.問題を解決する方法は2つある.

setTimeout(() => button.click(), 1000)のようにRapper関数を渡す

メソッドをオブジェクトにバインド(ジェネレータなど)

クラスフィールドには、別の優れた方法があります.

class Button {
  constructor(value) {
    this.value = value;
  }
  click = () => {
    console.log(this.value);
  }
}

const button = new Button("hello");

setTimeout(button.click, 1000); // hello

クラスフィールドclick = () => {...}は、Buttonオブジェクトごとに独立した関数を作成し、そのオブジェクトに関数のthisをバインドする.したがって、開発者は、button.clickを任意の場所に送信することができ、thisは常に所望の値を含む.
これらの機能は、ブラウザ環境でメソッドをイベントリスナーに設定する必要がある場合に特に役立ちます.
https://ko.javascript.info/bind