「ES2015(ES6)」アロー関数にthisでクラスのオブジェクトを表示

2021年10月5日

書式
関数名 = ()=> {
document.getElementById(ID名).innerHTML+=this;
}

使用例

<!DOCTYPE html>
<html>
<body>
<!--ボタンの定義 -->
<button id="btn">テスト</button>
<!--セレクタdivの定義 -->
<div id="show"></div>

<script>
/*クラスの定義*/
class Sample {
　 /*コンストラクタ*/
  constructor() {
    this.user = "yamda";
  }
  /*アロー関数*/
  chgUser = () => {
  　/*セレクタID「show」にSampleのオブジェクトを表示*/
    document.getElementById("show").innerHTML += this;
  }
}
/*Sampleクラスのインスタンスを生成*/
cft = new Sample();

//ウィンドウオブジェクトは次の関数を呼び出す
window.addEventListener("load", cft.chgUser);

//ボタンオブジェクトは次の関数を呼び出す
document.getElementById("btn").addEventListener("click", cft.chgUser);

</script>

</body>
</html>

ECMAScript/ES6

Posted by arkgame