div를 만든 객체를 참조 할 수있는 div에 eventListener 추가

Question

나는 입력에서 문자를 계산하고 입력 옆에있는 div에 문자의 수를 표시하는 객체가 있습니다. 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); 

} 

내가 원하는 동작이 사업부는 클릭 할 때 숯불 카운터 카운트 다운 ('15의 문자가 왼쪽 ')와 카운트 업 사이에 전환이다 ('30 45 글자 '). localStorage에 char 카운터의 상태를 저장하여 사용자가 char counter를 떠난 상태가 무엇이든간에 다시 돌아올 때 그 방식으로 찾을 수 있도록합니다.

이제이 코드는 실제로 잘 작동하지만보다 우아한 방법이 있다는 느낌을 피할 수는 없습니다. 나는 그것이 작동하도록 얻기 위해 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라고 당시의 것과 동일합니다 toggleDirection에 this) 컨텍스트로 this로 호출됩니다.

도 참조하십시오. Function.bind