new演算子と構造関数

📢 22/03/13復習
📚 Reference
javascript.info, https://ko.javascript.info/constructor-new
注意:これは個人がサイトで復習しやすいように再編成された文章です.
詳細については、リファレンスサイトにアクセスしてください.
緒論
オブジェクトテキスト{...}を使用すると、簡単にオブジェクトを作成できます.しかし、開発中に類似のオブジェクトを複数作成する必要があることがよくあります.複数のユーザーメニューの様々なアイテムをオブジェクトで表現したい
💥 new演算子とコンストラクション関数を使用すると、複数の類似オブジェクトを簡単に作成できます.
コンストラクタ
コンストラクション関数(constructor function)は、従来の関数と技術的に区別されない.ただし、コンストラクション関数は、次の2つの慣例に従います.
📌 関数名の最初の文字は大文字で始まります.
📌 new演算子を使用する必要があります.

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("보라");

alert(user.name); // 보라
alert(user.isAdmin); // false

new User(...)を使用して関数を実行する場合は、次のアルゴリズムが有効です.
🕐 空のオブジェクトを作成し、thisに割り当てます.
🕑 関数の本文を実行します.
🕒 thisに新しいpropertyを追加して、thisを修正します.
🕓 は、thisを返します.

function User(name) {
  // this = {};  (빈 객체가 암시적으로 만들어짐)

  // 새로운 프로퍼티를 this에 추가함
  this.name = name;
  this.isAdmin = false;

  // return this;  (this가 암시적으로 반환됨)
}

現在、let user = new User("보라")の動作は、以下に入力するコードと同じである.

let user = {
  name: "보라",
  isAdmin: false
};

new User("보라")に加えて、new User("호진")およびnew User("지민")は、ユーザオブジェクトを簡単に作成することもできる.オブジェクトのテキスト構文を使用してオブジェクトを作成するよりも、オブジェクトを作成する方が簡単で読みやすいようになります.
ジェネレータの意味はここにある.再利用可能なオブジェクト生成コードを実現します.
💥 すべての関数が構造関数であることを忘れないでください.newを使用して実行される場合、上記の任意の関数は、上記のアルゴリズムを実行する.「大文字」という名前の関数はnewを使用して実行する必要があります.共通の約束だから.
🔥 new function() { ... }
繰り返し使用する必要のない複雑なオブジェクトを作成する必要があると仮定します.大量のコードが必要です.この場合、コードを匿名コンストラクション関数にカプセル化するには、次の方法を使用します.

let user = new function() {
  this.name = "John";
  this.isAdmin = false;

  // 사용자 객체를 만들기 위한 여러 코드.
  // 지역 변수, 복잡한 로직, 구문 등의
  // 다양한 코드가 여기에 들어갑니다.
};

以上のコンストラクション関数は匿名の関数であるため、どこにも保存されません.1回目の作成時から1回しか呼び出されないため、再利用できません.これにより,匿名構造関数は再利用を阻止しながらコードをカプセル化することができる.
ジェネレータと戻り文
コンストラクション関数には、通常、return文はありません.返さなければならないものはすべてthisに格納され、thisは自動的に返されるので、返される文を明示的に記入する必要はありません.
しかし、returnゲートがあれば、何が起こるのでしょうか.次の簡単なルールが適用されます.
📌 オブジェクトがreturnの場合、返されるオブジェクトはthisの代わりになります.
📌 オリジナルがreturnの場合、returnゲートは無視されます.
オブジェクトがreturnの後にある場合、コンストラクション関数はオブジェクトを返し、そうでない場合はthisを返します.
次の例では、returnがthisを無視してオブジェクトに戻る第1のルールが適用されます.

function BigUser() {

  this.name = "원숭이";

  return { name: "고릴라" };  // <-- this가 아닌 새로운 객체를 반환함
}

alert( new BigUser().name );  // 고릴라

何もしないreturnの例を見てみましょう.2番目のルールは、元のタイプを返すときと同じように適用されます.

function SmallUser() {

  this.name = "원숭이";

  return; // <-- this를 반환함
}

alert( new SmallUser().name );  // 원숭이

return文を含むコンストラクション関数はほとんどありません.
🔥 かっこを省略
パラメータを持たないコンストラクション関数は、カッコを省略して呼び出すことができます.

let user = new User; // <-- 괄호가 없음
// 아래 코드는 위 코드와 똑같이 동작합니다.
let user = new User();

リストにはカッコを省略できますが、「良いスタイル」ではありません.
ジェネレータのメソッド
コンストラクション関数を使用すると、パラメータを使用してオブジェクト内で自由に構成できます.柔軟性が大きい.
これまで、thisにpropertyを追加した例だけを見てきましたが、方法を追加することもできます.
次の例では、new User(name)は、Property nameおよびメソッドsayHiを有するオブジェクトを作成する.

function User(name) {
  this.name = name;

  this.sayHi = function() {
    alert( "제 이름은 " + this.name + "입니다." );
  };
}

let bora = new User("이보라");

bora.sayHi(); // 내 이름은 이보라입니다.

/*
bora = {
   name: "이보라",
   sayHi: function() { ... }
}
*/

class構文を使用すると、コンストラクション関数を使用するのと同じように複雑なオブジェクトを作成できます.