divを作成したオブジェクトを参照できるdivにeventListenerを追加

Question

私は、入力内の文字を数え、divの入力の横にある文字の数を表示するオブジェクトを持っています。私は、clickイベントリスナーをdivに追加して、divを作成したオブジェクト内の関数を呼び出すとします。私は今ここに自分自身を混乱させていますいくつかのコードです：

var CharDisplay = function(input, max) { 
    this.input = input; 
    this.maxChars = max; 
    this.direction = "countUp"; 

    this.div = document.createElement("div"); 
    this.div.setAttribute("class", "charCounter"); 
    this.input.parentNode.appendChild(this.div); 

    var that = this; // I don't like doing this 

    // This function toggles the direction property and tells the extension 
    // to update localStorage with the new state of this char counter 
    var toggleDirection = function() { 
      that.direction = that.direction === "countUp" ? "countDown" : "countUp";  
      that.update(); 
      chrome.extension.sendRequest({ 
        "method" : "updateCharCounter", 
        "id" : that.input.id, 
        "state" : { 
          "direction" : that.direction, 
          "limit" : that.maxChars 
        } 
      }); 
    } 

    this.div.addEventListener("click", toggleDirection); 

} 

私が望む行動はdiv要素をクリックしたときにシャアカウンタがカウント・ダウン（'15の文字が「左）とアップカウントに切り替えることである（'30 45文字の文字列）。私はcharStatementにcharカウンタの状態を格納するので、ユーザーがcharカウンタをどのような状態にしておいても、戻ってきたときにそのように見つかるでしょう。

このコードは実際にはうまく動作しますが、よりエレガントな方法があることを逃れることはできません。私はそれを稼働させるためにvar that = thisを追加しなければならなかったが、私はいつもそれが「ハック」であると感じ、できればそれを避けようとする。

あなたはこれを達成するためのより良い方法を考えてもらえませんか、または壊れていないものを修正しようとするのを止めるべきですか？

Answer 1

var that = thisトリックはJavaScriptでよく使われます。

代替は、指定されたコンテキストに関数をバインドすることです：

function bind(context, fun) { 
    return function() { 
     fun.call(context, arguments); 
    }; 
} 

この関数は、呼び出されたときに、与えられたcontextとfunを呼び出す関数を返します。

あなたはこのようにそれを使用することができます。これにより

this.div.addEventListener("click", bind(this, toggleDirection)); 

、toggleDirectionは（あなたがaddEventListenerと呼ばれる時間に1つのと同じになりますtoggleDirectionにthis）コンテキストとしてthisで呼び出されます。

Function.bindも参照してください。