Javascript 상속과 'this'의 컨텍스트 상실

Question

John Resig의 Simple JavaScript Inheritance를 사용하고 있으며 'this'가 의미하는 것을 잃어 버리는 문제가 발생했습니다. 이 코드를 사용 : 나는 기대와 경고가 처음 sub runner success로

var Runner = Class.extend({ 
init: function() { 
    this.update(); 
    if(!this.interval) { 
    this.interval = setInterval(this.update, this.period * 1000); 
    } 
}, 
stop: function() { 
    clearInterval(this.interval); 
}, 
update: function() { 
    this.success() 
}, 
success: function(){ 
} 
}); 

var SubRunner = Runner.extend({ 
update: function() { 
    this._super(); 
}, 
success: function(){ 
    alert('sub runner success'); 
} 
}); 

이 p = new SubRunner() 작업을 실행합니다. 처음 실행 한 후 잘못된 'this'(창)에서 success 함수를 실행하려고 시도합니다.

Prototype은 함수에 컨텍스트를 전달할 수 있도록 바인딩 함수를 제공하지만 여기에 비슷한 작업을 수행하지 못했습니다. 누구든지 이것을 알아내는 출발점이 있습니까?

감사합니다.

Answer 1

this.update를 setInterval 함수에 전달할 때 문제가 발생합니다. Javascript에서 "this"는 점 표기법을 사용하여 함수를 호출하는 경우에 따라 달라지며 함수는 콜백으로 전달하거나 변수에 저장하면 해당 함수의 출처를 기억하지 않습니다.

당신은 래퍼 함수

var that = this; 
setTimeout(function(){ that.update() }, this.perios*1000) 

을 추가 할 수 있습니다 또는 당신은 당신의 브라우저에서 사용 가능한 경우 바인딩 방법을 사용할 수 있습니다 (또는 프로토 타입에 유사한 기능을 사용할 수 있습니다).

setTimeout(this.update.bind(this), this.period*1000) 

Answer 2

this.update를 setInterval에 전달하면 컨텍스트가 손실됩니다. 가장 간단한 해결책은 전역 (그것은 window에 this 설정)에서 호출하는 함수를 호출 할 때 setTimeout

var that = this; 
this.interval = setInterval(function() { that.update() }, this.period * 1000); 

Answer 3

this.interval = setInterval(this.update, this.period * 1000); 

할 것이다.

this.update을 호출하는 함수를 전달해야합니다.

var self = this; 
this.interval = setInterval(function(){ 
    self.update(); 
}, this.period * 1000);