《TypeScript图形渲染实战：2D架构设计与实现》 —3.2.4 回调函数的this指向问题

3.2.4  回调函数的this指向问题

　　如果仔细看，会发现在Application类中的start和step成员方法中，在调用request AnimationFrame时，其参数都是使用箭头函数的方式：requestAnimationFrame ( ( elapsed Msec : number ) : void => { } )；而在3.1.3节中，调用requestAnimationFrame 函数时使用的是函数名作为参数：window . requestAnimationFrame ( step )。那么能否在Application类中的start和step方法中像3.1.3节的代码一样，使用函数名或方法名作为requestAnimation Frame方法的参数呢

　　答案是：不能。下面修改一下start方法中的代码：

public start  ( ) : void {

    if ( ! this . _start ) {

        this . _start = true ;

        this . _requestId = -1 ;               // 将_requestId设置为-1

        // 在start和stop函数中，_lastTime和_startTime都设置为-1

        this . _lastTime = -1 ;

        this . _startTime = -1 ;

        // 启动更新渲染循环

        /* 注释掉箭头函数

        this . _requestId = requestAnimationFrame ( ( msec : number ) :

        void => {

            // 启动step方法

            this . step ( msec ) ;

        } ) ;

        */

        //注释掉上述代码，使用下面的代码来启动this . step方法

       this . _requestId = requestAnimationFrame ( this . step ) ;

    }

}

　　然后如图3.6所示，在step成员方法体内第一行设置一个断点，按F5键启动调试后来看一下运行效果。

图3.6  step方法中this指针为null值

　　会看到，当运行到如图3.6所示的153行断点处，程序中断，此时将鼠标指针放在this关键字上，会显示this当前值为null值，这意味着如果代码继续往下运行（F10），程序肯定会报错，如图3.7所示。

图3.7  Chrome浏览器报null值错误

　　之所以报null值错误，是因为在编写step成员方法代码时，所有的this都是假设指向Application类的实例对象。但是将step成员方法作为参数传递给requestAnimationFrame方法时，step中的this实际上被绑定为null值了。为什么会这样呢？还是举个简单例子来更加详细地了解一下吧。