貴方のコードを見る限り、そもそもclassの意義をきちんと理解できていないように見えます。
前提として、貴方のコードはclassを使わずとも、以下に示すように書くのと同じですよね。
const username = document.querySelectorAll('#sunbreak_username');
const usernumber = username.length;
function noname(){
for(let count = 0; this.usernumber !== count; count++){
if(this.username[count].innerHTML === ''){
this.username[count].innerHTML = '名無しのユーザー';
}
}
}
わざわざclassを使う必要が無いです。
「いや、グローバル変数にするのはちょっと……」と思うかもしれませんが、それが困るならばこんな書き方も出来ます。
const UserManager={
username:document.querySelectorAll('#sunbreak_username'),
usernumber:this.username.length,
noname:function(){
for(let count = 0; this.usernumber !== count; count++){
if(this.username[count].innerHTML === ''){
this.username[count].innerHTML = '名無しのユーザー';
}
}
}
}
じゃあ、classとはいつ使うのか、どう使うのか。それは「複数のデータのまとまりを保存したいとき」です。例えば
- username(デフォルトで名無しのユーザー、もしかしたら名前を付けるかも？)
- userid(整数)
- userelement(ユーザーの情報を載せたい要素)」
の三点セットをまとめて保存して置く場合などに用います。
class User{
constructor(name, id, element){
if(name==null){
this.name='名無しのユーザー';
}
else{
this.username=name;
}
this.userid=id;
this.userelement=element;
this.update();
}
update(){
this.userelement.innerHTML = this.username;
}
changeName(name){
this.name = name;
this.update();
}
}
const userelements = document.querySelectorAll('#sunbreak_username');
const users = [];
for(let i=0; i < userelements.length; i++){
users.push(new (null, i, userelements));
}
//その後、どこかのタイミングで名前を変更したくなった場合
users[0].changeName("太郎");
users[1].changeName("花子");
//changeNameするだけで、「users[0].nameが書き換えられ、同時にHTMLも更新される」
classの正しい使い方が分かれば、constructorの意味も理解できるのではないでしょうか？
