javascript在class中使用requestAnimationFrame的问题

我们都知道requestAnimationFrame是用于做动画的，它可以根据系统性能自动定时的时间，让动画效果达到最流畅，用法也简

function step() {
  console.log('hellow world');
  window.requestAnimationFrame(step);
}

window.requestAnimationFrame(step);

 这样控制台就会一直打印‘hellow world’了，想要取消的话也很简单，因为window.requestAnimationFrame(step)会返回一个id，所以想要取消的话首先要先赋值 var myReq = window.requestAnimationFrame(step);然后调用下面的代码就可以取消了。

window.cancelAnimationFrame(myReq);

这是一般的模式，但是要想在class中使用，如果按照上面的写法可能会出现这样的问题 

 

class ReqAni {
	step() {
		requestAnimationFrame(this.step);
	}
}
var r = new ReqAni();
r.step();

这是控制台会报错

这主要是this的指向导致的，正确的方式是将this的指向用bind方法强制给指向到这个class就行了，注意：这里不能用call和apply，虽然call和apply都可以改变this的指向，但是注意看requestAnimationFrame其实是接收的是一个函数指针，一旦你用call或者apply之后，就会立即执行函数，达不到效果，看看最后正确的代码把。

class ReqAni {
			step() {
				requestAnimationFrame(this.step.bind(this));
			}
		}
		var r = new ReqAni();
		r.step();

这样就可以在类中使用requestAnimationFrame了。