[Yeu]divを含むクラスを設計する

質問する

質問リンク

解決策

JavaScriptのClassをよく知らないのは本当に大変です.
私にとって罠(?)これはちょっとうるさい問題だ.

1.クラス作成者とメソッド

function solution() {
   class ClassYouMade {
      constructor(str) {
         this._div = document.createElement('div');
         this._str = str || "";
      }
     
     appendTo(parent){
      this._parent = parent;
     }
   }
   return ClassYouMade;
}

let MyDiv = solution();

コード解析を行う場合、関数solutionはclassを返す関数である
変数MyDivはclassを作成する関数解を含む

let cym1 = MyDiv('안녕');
let cym2 = MyDiv('안녕').appendTo(parent);

この部分で問題が発生します.このコードを実行すると、変数cym 1とcym 2は次のようになります.

cym 1はClassYouMadeオブジェクト
cym 2で未定義の惨事が発生した.
メソッドappendTo()
次のコードに違いがあります.

let cym2 = MyDiv('안녕').appendTo(parent);
----------------------------------------
let cym3 = MyDiv('안녕');
cym3.appendTo(parent);

以上のコードはクラスを作成する関数MyDivのメソッドappendToを実行する関数である.
次のコードは、オブジェクトを作成した後にオブジェクトを実行する方法です.
すなわち,CYM 2はオブジェクトを割り当てず,MyDiv()である.appendTo()メソッドの戻り値が指定されます.
ただしappendTo()は何も返さずundefinedを表す

2.appendTo()メソッドを返す

appendTo(parent){
         this._parent = parent;
         return this;
}

let cym = new MyDiv('안녕').appendTo(parent);

parentを設定して返します.これはClassYouMadeオブジェクトです.
変数cymは次のようになります

3.setter関数fontSize()を実行します。

 set fontSize(newfontSize){
   this._div.textContent = this._str;
   this._div.style.fontSize=newfontSize;
   this._parent.appendChild(this._div);
}

setter関数fontSize()の実行後、strおよびfontSizeに設定され、parentに添付されます.

完全なコード

function solution() {
   // 여기에 코드를 작성해주세요
   class ClassYouMade {
      constructor(str) {
         this._div = document.createElement('div');
         this._str = str || "";
      }

      appendTo(parent){
         this._parent = parent;
         return this;
      }

      set fontSize(newfontSize){
         this._div.textContent = this._str;
         this._div.style.fontSize=newfontSize;
         this._parent.appendChild(this._div);
      }
   }
   return ClassYouMade;
}