【js学習の道】イベントバインディング関数では、thisを呼び出し対象に変換することによる問題

私はjs初心者です.ブログを書いて、私のjs学習の道を記録したいです.今日は簡単なイベントを書いてバインディングする時に、thisを呼び出しの対象に変更した時にエラーが発生しました.コードは以下の通りです

    
    


    
AAAA
    
BBBB
    
        var ps = document.getElementsByTagName("p");
        for (var i = 0; i < ps.length; i++) {
            ps[i].onclick = function () {
                ps[i].style.color = "red";
            }
        }
    

このコードでは、onclickイベントバインディングの関数であるthisを、調合者ps[i]に変換します.このコードを実行すると、jsはまずフルサイクルを実行し、該当するオブジェクトに関数をバインドします.ユーザがトリガイベントをクリックすると、実際に変数iが2になり、ps[2]が存在しないため、エラーが発生します.forサイクル内でvarで定義される変数iはグローバル変数です.
解決方法は、ES 6の新しい特性letを用いて変数iを定義することができ、これでエラーが発生しない.