setInterval 및 setTimeout을 사용하여 프로토타입 메서드에서 \"this\" 참조 처리: 솔루션은 무엇입니까?

setInterval 및 setTimeout을 사용하여 프로토타입 메서드에서 이 참조 처리

JavaScript에서 프로토타입 메서드는 추출되어 다른 곳으로 전달될 때 이 연결을 잃습니다. 다음 코드를 고려하세요.

function Foo() {}
Foo.prototype = {
  bar: function () {
    this.baz();
  },
  baz: function () {
    this.draw();
    requestAnimFrame(this.baz);
  }
};

이 코드는 setInterval 또는 setTimeout 콜백 내에서 적절하게 바인딩되지 않았기 때문에 오류와 함께 실패합니다.

해결책:

이 문제를 처리하는 방법에는 여러 가지가 있습니다.

익명 함수의 래핑 메서드 호출:

var that = this;
setInterval(function () {
  return that.baz();
}, 1000);

이는 다음을 사용하여 외부 함수에서 this를 보존합니다. 도우미 변수.

Fat Arrow 함수의 래핑 메서드 호출:

setInterval(() => this.baz(), 1000);

Fat Arrow 익명 함수는 주변 함수에서 this를 유지합니다.

바인딩 함수 사용:

setInterval(this.baz.bind(this), 1000);

// dojo toolkit example:
setInterval(dojo.hitch(this, 'baz'), 10);

Function.prototype.bind 또는 이에 상응하는 라이브러리와 같은 바인딩 함수를 사용하면 this 컨텍스트를 명시적으로 바인딩할 수 있습니다.

위 내용은 setInterval 및 setTimeout을 사용하여 프로토타입 메서드에서 \"this\" 참조 처리: 솔루션은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!