프로토 타입에서 객체 인스턴스 가져 오기

Question

이벤트 함수 내에서 객체의 멤버에 액세스하려고합니다.

function MyObject(canvas) 
{ 
    this.value = 'Hello World'; 
    this.canvas = canvas; 
    this.canvas.addEventListener('mousemove', this.mouseMove); 
} 

MyObject.prototype.mouseMouse = function(evt) 
{ 
    // this is the canvas 
    var context = this.getContext('2d'); 
    context.fillText(/* how to get MyObject's value? */ , 0, 0); 
} 

감사 : 나는 일이 잘못하고있어 경우 미안 해요, 초보자 :

내가 이런 일을 해요.

Answer 1

콜백 함수는 객체 인스턴스의 컨텍스트에서 호출되어야한다. 현대적인 브라우저의 특정 문맥에 바인드되는 함수 반환 Function.prototype.bind 사용할 수 있습니다 : 단순한 관점에서

this.canvas.addEventListener('mousemove', this.mouseMove.bind(this)); 

, MyObject.prototype.mouseMoveaddEventListener에서 호출되는을, 함수 내 this의 값은 canvas 인스턴스가 될 것입니다 . 대신 의 값을 MyObject 인스턴스로 지정하십시오.

이 문제를 해결하기 위해 실제로 호출 할 함수의 래퍼 인 함수를 전달합니다. this.mouseMove.bind(this)this 값이 캔버스 대신 개체 인스턴스가되도록 mouseMove 함수를 래핑하는 새 함수를 만듭니다.

이 일을하는 또 다른 방법은 익명 함수 래퍼를 만드는 것입니다 :

... 
var self = this; 
this.canvas.addEventListener('mousemove', function (e) { 
    self.mouseMove(e); 
}); 

이 형식의 단점은에 파이프 함수로 통과 얼마나 많은 인수를 알 필요가 있다는 것입니다 내부 함수 호출.

이 주위에 방법이 Function.prototype.apply 함께 :

var self = this; 
this.canvas.addEventListener('mousemove', function() { 
    //cast arguments to an array for cross-browser compatibility 
    var args = Array.prototype.slice.call(arguments); 
    return self.mouseMove.apply(self, args); 
}); 

이제 코드의 종류를 쓰기 많은 아웃 추상적 변수에 쉽게 방법이 실현거야, 당신이 필요로하는 모든 함수는 컨텍스트를 사용하면 래퍼를 생성 할 수 있습니다. 그것이 Function.prototype.bind입니다.

Answer 2

매우 간단하며 이미 이해하신 것 같습니다.

this.value

Answer 3

MyObject 컨텍스트를 이벤트 수신기 내에 보존하는 여러 가지 옵션이 있습니다. bind는 하나이며 여기에 또 다른입니다 : 이벤트 기능의 맥락에서

function MyObject(canvas) { 
    this.value = 'Hello World'; 
    this.canvas = canvas; 

    var self = this; 
    this.canvas.addEventListener('mousemove', function(e) { 
     self.mouseMove(e); 
    }); 
}