typescript
1class ButtonDOM { 2 elm: HTMLElement; 3 static create(): ButtonDOM { 4 let button = new ButtonDOM(); 5 button.elm = document.createElement("button"); 6 return button; 7 } 8 9 addLabel(labelText: string): ButtonDOM { 10 this.elm.appendChild(document.createTextNode(labelText)); 11 return this; 12 } 13 14 onClick(content: string): ButtonDOM { 15 this.elm.onclick = function () { 16 alert(content); 17 }; 18 return this; 19 } 20 21} 22 23let myButton = ButtonDOM.create() 24 .addLabel("押してください").onClick("押しました"); 25 26document.body.appendChild(myButton.elm);
このコードの流れを理解できないです。
まずクラス ButtonDOMのフィールドには変数 elmが用意されている。
次に、その中のstaticなメソッド(create)で ButtonDOMクラスからインスタンス(let button)を生成する。
これによってstaticなメソッド createの中で、button.elmといった形で ButtonDOMクラスの変数を使うことができる。
そこに要素を格納してから buttonインスタンスを返す。
ここまではなんとなくですが理解できたようなできてないような気がします。
まず上記の理解は合ってますでしょうか。
分からないところは、
・ static create(): ButtonDOM の :ButtonDOM のところ。ここは何をしているのでしょうか。
・ addLabelメソッドとonClickメソッドのreturn this;というところのthisに何が入っているのか。
・ ButtonDOM.create().addLabel("押してください").onClick("押しました");
という書き方ができるのは createメソッドが、 ButtonDOMクラスのインスタンスを返すから、このような表記で addlabelメソッドが呼べるのでしょうか。
そしてそこに続けて onClickメソッドが呼べるのは onClickは同じようにクラスのインスタンスを返す。つまり return this;の thisはクラスのインスタンス指しているのでしょうか。
・ ファクトリーメソッド(create)の利点を教えてください。メソッドの中で自分が所属するクラスのインスタンスを生成し返す。というこの書き方のメリットを教えてください。
読みづらいところが多々あって申し訳ないです。
どなたか教えてください(>_<)
分からないところの一部でもかまいません。
追記
ぼくの、「分からないところ」の項目を無視して独自の解説をしてくださってもかまいません。
どのような形であれ回答をくださったらとても嬉しいです。
回答1件
あなたの回答
tips
プレビュー