「ES2015(ES6)」アロー関数にthisでクラスのオブジェクトを表示
書式
関数名 = ()=> {
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>
<!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>
<!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>