자바 스크립트 함수에서 변수가 업데이트되지 않습니다.

Question

일부 자바 프로젝트를 작성 중이며 변수 업데이트에 몇 가지 문제가 있습니다. 나는 그런 기능을 가지고 :

function Bullet(top){ 
     this.top = top;  
     update(); 

     function update(){ 
      this.top -= 5; 
      console.log(this.top) 
      setTimeout(update, 50); 
     } 
}; 

Bullet.prototype.getTop = function(){ 
     return this.top; 
    }; 

내가 전화 할 때 : 나는 반복적으로, 나는 또한 얻을 결과 bullet.getTop() 호출 할 때

var bullet = new Bullet(300); 

나는 물론 (300)의 연속 콘솔 출력을 얻을 300

자, 내 질문은 다음과 같습니다. 왜 이런 일이 발생합니까? 어떻게 수정해야합니까?

Answer 1

"업데이트"함수에서 "this"는 "글 머리 기호 함수"컨텍스트가 아닌 "업데이트 함수"컨텍스트에 바인딩됩니다. 따라서 함수 내에서 "this"를 사용하면 래퍼 함수와 관련이 없으며 변경하는 경우 "this"가 사용 된 함수의 로컬 컨텍스트에만 적용됩니다. 당신은 "이"here

당신은 두 가지 방법으로

첫 번째는 단순히에 부름받은 함수의 사본을 반환 할 때 (컨텍스트) 함수를 .bind 호출하는 것입니다 만의 문제를 해결할 수에 대한 자세한 내용을보실 수 있습니다 이 카피는 건네받은 문맥에 바인드됩니다. 그러나 이런 식으로 사용할 때 함수를 정의한 후에 함수를 호출해야합니다. 울부 짖는 소리와 같은 자바 스크립트 클로저를 사용하여

this.top = top 

var update = function(){ 
     this.top -= 5; 
     console.log(this.top) 
     setTimeout(update, 50); 
}.bind(this) 

update(); 

또는 , 당신은 다음 "그"업데이트 함수 내에서 사용하는 말 "고"과의 래퍼 컨텍스트를 저장할 수 있습니다 어떤 호출 클로저를 정의합니다.

var that = this; 
function update(){ 
     that.top -= 5; 
     console.log(that.top) 
     setTimeout(update, 50); 
}