TypeScript: this bind 和 回調的正確用法

TypeScript 中如果傳遞了 而且在回調函數中用了this 的話, 就要小心了, 這個this 不一定是指向當前類對象了,
如果想確保指向的還是那個對象的話, 需要在傳遞那個方法的時候, 先調用bind(this).
或者就是在回調的時候, 不要直接func(agrs) 而是改成 func.call(目標對象, args)

示例：

TestCallAndThis.ts 提供了2種回調的寫法，第二種是推薦的寫法

namespace naiking
{
    /**
     *author     : NaiKing
     *description: 
     */
    export class TestCallAndThis {
        /**
         * 不推薦的回調寫法
         * 外部調用必須【必須】【必須】在回調參數方法后面添加.bind(this),
         * 否則可能會this異常
         */
        public static callBackTest(arg:number,callBack:Function):void
        {
            //返回 2 x arg
            let result:number=arg*2;
            //不推薦直接調用回調方法，應使用callBack.call(caller,result);
            callBack(result);
        }
        /**
         * 推薦的回調寫法
         * @param arg 參數
         * @param caller 調用域 
         * @param method 指定的回調方法（兼容.bind(this) 也可以不加.bind(this) ）
         */
        public static callMethod(arg:number,caller:any,method:Function):void
        {
            //返回 2 x arg
            let result:number=arg*2;
            //推薦的做法 .call(caller,result);
            method.call(caller,result);
           
        }
    }
}

調用（測試）

namespage naiking
{
   export class Luna
   {
 　　　//注意觀察，this異常的時候的isLoading的值是undefind
      private isLoading:boolean = false;
      private getResult(rst:number):void
      {
          console.log("get rusult:"+rst+this.isLoading);
        
      }
      constructor()
      {
          //不推薦的回調寫法， 遺漏了bind（this）
          logic.TestCallAndThis.callBackTest(1,this.getResult);
          //不推薦的回調寫法， 使用了bind（this）（ √ ）
          logic.TestCallAndThis.callBackTest(1,this.getResult.bind(this));
        
          //提倡的回調寫法 ，有無bind(this)都可以
          logic.TestCallAndThis.callMethod(1,this,this.getResult);
          logic.TestCallAndThis.callMethod(1,this,this.getResult.bind(this));
      }
   }
}

運行第一種，this的指向是異常的，自然this.isLoading是undefind

 

打印的測試log：

get rusult:2undefined                     

 

后面的幾種，都是正常的結果