이벤트 핸들러에서`this`에 어떻게 접근 할 수 있습니까?

Question

DOM 요소를 만들고 모든 클릭 이벤트를 캡처해야하는 클래스가 있습니다.

간체 코드 :

function myClass() 
{ 
    this.domElement = document.createElement("canvas"); 
    this.domElement.addEventListener("click", this.handleClick); 
} 
myClass.prototype.handleClick = function(evt) 
{ 
    alert("Clicked!"); 
    // How to modify `this` object? 
} 

가 지금은 handleClick()에 myClass가 인스턴스의 일부 속성과 변수를 수정할. 그러나 this은 물론 캔버스 객체를 참조합니다.

질문 : 이벤트 처리기에서 객체의 this에 어떻게 액세스합니까?

Answer 1

이 함수의 범위를 강제로 적용하여 인스턴스에 대한 참조를 통해 폐쇄를 통해 달성 될 수있다 : http://jsfiddle.net/JAAulde/GJXpQ/

2 단계에서 생성자에 인스턴스에 대한 참조를 저장 한 다음 익명 함수를 클릭 핸들러로 설정하고 저장된 메서드에서 click 메서드를 호출하는 예제가 있습니다. http://jsfiddle.net/JAAulde/GJXpQ/1/이 인스턴스로 사용자의 클릭 핸들러 내 this가 발생하고 클릭 된 요소에 대한 액세스를 필요로하지 않는 경우에 당신을 위해 작동합니다.

3 단계에서 익명 함수를 사용했지만 동일한 함수를 사용했지만 그 함수 안에는 클릭시 anon 함수로 들어오는 인수를 가져옵니다.이 인수에 인스턴스에 대한 참조를 추가하고 클릭 된 요소의 범위에서 클릭 핸들러를 호출하고 새 인수 세트를 전달하십시오. 이 방법을 사용하여 http://jsfiddle.net/JAAulde/GJXpQ/2/, 클릭 처리기 내부에서 나는 this를 통해 클릭 한 요소에 액세스 할 수 있으며, instance를 통해 myClass의 인스턴스입니다.

이 정보가 도움이되기를 바랍니다. 그것은 매우 혼란 스러울 수 있으므로 필요할 경우 질문하십시오.

Answer 2

당신은 이런 식으로 작업을 수행 할 수 있습니다

function myClass() { 
    var self = this; 

    this.domElement = document.createElement("canvas"); 
    this.domElement.addEventListener("click", function(evt){ 
     // use self here 
    }); 
} 

을 청취자가 실제로 폐쇄이기 때문에, 당신이 관찰하고 개체 인 변수 self에 대한 참조를 유지합니다. 실제 this, 알아 냈으므로 canvas 요소를 참조하십시오.

작업을 거라고 또 다른 방법, 및 유지 방법은 구분 :

function myClass(){ 
    var self = this; 

    this.domElement = document.createElement("canvas"); 
    this.domElement.addEventListener("click", function(evt){ 
    myClass.prototype.call(self, evt); 
    }); 
} 
myClass.prototype.handleClick = function(evt){ 
    alert("Clicked!"); 
    // How to modify `this` object? 
} 

지금이 하나 Function.call를 사용하고 어떤 this 참조로 할당합니다.

Answer 3

.bind을 사용하면 값을 사전 설정된 값으로 "고정"합니다 : http://jsfiddle.net/TKAHg/.

.bind은 원래 기능과 동일한 기능을 수행하지만 사용자가 제공 한 값에 의존 할 수 있도록 this을 설정합니다. .bind 비록

는 MDC has a shim for it 이전 버전의 브라우저에서 사용할 수 없습니다. 1 단계에서

제가 this가 클릭 된 요소 방법 보여주는 일례를 가지고

// bind 'this' value inside handleClick when clicked 
this.domElement.addEventListener("click", this.handleClick.bind(this));