コードの実行順序について

Question

document.addEventListener('DOMContentLoaded',function(){
    //指定された要素elemがクリックされた回数をカウントするCounterクラス
    var Counter = function(elem) {
        this.count = 0;
        this.elem = elem;
        elem.addEventListener('click',() =>  {
            this.count++;
            this.show();
            
            
        },false);
    };
    
    Counter.prototype.show = function() {
        console.log(this.elem.id + 'は' + this.count + '回クリックされました。');
    }
 //   <button>要素btnにカウンターをひも付け
    var c = new Counter(document.getElementById('btn'));
    
    
},false);

上記コードに関しまして、お聞きしたいことがあるのですが、「var c = new Counter(document.getElementById('btn'));」ここの部分において、idタグのbtnをCounterオブジェクトへ渡していると思うのですが、クリックイベントが発生した時の処理コード「elem.addEventListener」関数はインスタンス化する前に記述されています。考えすぎなのかもしれないのですが、今回ご質問させて頂いたように、コードの実行順序としましては、「btn」要素を取得する前にクリックイベントの処理コードが記載されていた場合だと、どの要素に対してのクリックイベントか認識できないのではないかと思ったんですよね。
どなたか、上記コードの実行順序などの点に関しまして、ご解説頂けましたら幸いです。

Answer 1

結論から申し上げますと、杞憂にございます。

以下に、質問者様のコードと（ログを出力する以外は）等価なコードを乗せました。

console.log(0); // 当然ここから処理開始
document.addEventListener('DOMContentLoaded',function(){
  console.log(1); // HTML の DOM 要素がすべて読み込まれた後、ここが実行される。
  var Counter = function(elem) {
    console.log(3); // 既に elem (id=btn) は読み込まれている
    /* もしこの段階で要素をクリックしても、まだ反応しない */
    this.count = 0;
    this.elem = elem;
    elem.addEventListener('click',() =>  {
      console.log('クリック後の 0'); // クリックされるまで実行されない
      this.count++;
      this.show();
    },false);
  };
  Counter.prototype.show = function() {
    console.log('クリック後の 1');
    console.log(this.elem.id + 'は' + this.count + '回クリックされました。');
  }
  /* 判りやすくするため、引数の外に出したが、動作順序は変わっていない */
  const btn = document.getElementById('btn');
  console.log(2); // 定義されただけの関数の中身はまだ実行されていない
  var c = new Counter(btn);
},false);

上記コードの出力結果は、以下になります。
("(ここでクリック)" は出力されません)

0
1
2
3
(ここでクリック)
クリック後の 0
クリック後の 1
btnは1回クリックされました。

関数の中身が実行されるのは、その関数が呼び出されたときなので、
以下のコード

elem.addEventListener('click', () => { ... }, false);

が実行されるのは、上記コードの、console.log(2) の後になります。
つまり、要素は取得済みです。

質問者様のオリジナルのコードでは document.getElemenetById('btn') の結果が直接コンストラクタの引数に与えられていますが、それでも実行順序は同じで、先に引数に与える式の計算を行ってからCounter のインスタンス化が始まるので問題になりません。

Comments

[newyee]

分かりやすくご解説頂きありがとうございます。
「console.log(2)」が「console.log(3)」より先に実行されるということは、Counterオブジェクトは定義されている段階では、中身が読み込まれることはなく、 「var c = new Counter(btn);」ここの時点で、コンスタラクターが作動し、「btn」要素が引数として与えられ、「elem.addEventListener」関数の前までの処理が実行される、といった流れだと思うのですが、合っていますでしょうか？

[R.Mizukami]

そのとおりです。関数やコンストラクタの定義段階でその中身が影響を与えることはありません。

[newyee]

ありがとうございます。

Answer 2

Counter.prototype.show が定義される前に click() されたなら、当然、TypeError になりますが、new Counter された時点では定義済なので、その心配は杞憂かと。

Re: newyee さん