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

后面的几种,都是正常的结果

TypeScript: this bind 和 回调的正确用法的更多相关文章

  1. 你不知道的JavaScript--Item9 call(),apply(),bind()与回调

    1.call(),apply(),bind()方法 JavaScript 中通过call或者apply用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定 ...

  2. 转载~kxcfzyk:Linux C语言多线程库Pthread中条件变量的的正确用法逐步详解

    Linux C语言多线程库Pthread中条件变量的的正确用法逐步详解   多线程c语言linuxsemaphore条件变量 (本文的读者定位是了解Pthread常用多线程API和Pthread互斥锁 ...

  3. Spring MVC中Session的正确用法<转>

    Spring MVC是个非常优秀的框架,其优秀之处继承自Spring本身依赖注入(Dependency Injection)的强大的模块化和可配置性,其设计处处透露着易用性.可复用性与易集成性.优良的 ...

  4. C#中dynamic的正确用法

    C#中dynamic的正确用法  http://www.cnblogs.com/qiuweiguo/archive/2011/08/03/2125982.html dynamic是FrameWork4 ...

  5. C# string.Split对于换行符的分隔正确用法

    C# string.Split对于换行符的分隔正确用法 tmpCase "11117144-8c91-4817-9b92-99ec2f9d784a\r\n23D95A26-012C-4332 ...

  6. 【转】Spring MVC中Session的正确用法之我见

    Spring MVC是个非常优秀的框架,其优秀之处继承自Spring本身依赖注入(Dependency Injection)的强大的模块化和可配置性,其设计处处透露着易用性.可复用性与易集成性.优良的 ...

  7. C#中dynamic的正确用法 以及 typeof(DynamicSample).GetMethod("Add");

    dynamic是FrameWork4.0的新特性.dynamic的出现让C#具有了弱语言类型的特性.编译器在编译的时候不再对类型进行检查,编译期默认dynamic对象支持你想要的任何特性.比如,即使你 ...

  8. 【转】改善C#程序的建议2:C#中dynamic的正确用法 空间

    dynamic是FrameWork4.0的新特性.dynamic的出现让C#具有了弱语言类型的特性.编译器在编译的时候不再对类型进行检查,编译期默认dynamic对象支持你想要的任何特性.比如,即使你 ...

  9. C#中dynamic、ExpandoObject 的正确用法

    原文地址:http://www.cnblogs.com/qiuweiguo/archive/2011/08/03/2125982.html dynamic是FrameWork4.0的新特性.dynam ...

随机推荐

  1. Java的URL类(二)

    转:https://www.cnblogs.com/brokencolor/p/8575440.html Java的URL类(二) 实例: Java 通过HttpURLConnection Post方 ...

  2. C++编程入门

    学习一门新的程序设计语言的最好方法就是练习编写程序. 每个C++程序都包含一个或多个函数,其中一个必须命名为main.操作系统通过调用main来运行C++程序. 一个函数定义包含四个部分:返回类型:函 ...

  3. 报错【org.springframework.validation.BeanPropertyBindingResult】

    报错内容:org.springframework.validation.BeanPropertyBindingResult: 1 errors Field error in object 'price ...

  4. redis命令Set类型(七)

    集合类型 集合类型:无序.不可重复 列表类型:有序.可重复 命令: 1>增加/删除元素 语法:SADD key member [member -] 127.0.0.1:6379> sadd ...

  5. golang channel

    ex1 package main /* goroutine 是由GO运行时管理的轻量级线程 go f(x,y, z) 就启动了一个goroutine, 其中f,x,y,z在当前goroutine中立即 ...

  6. 1个多商户、多平台版 微信小程序(多商户、多平台版),影城行业、影业连锁 多商户、多平台版微信小程序。(基于多平台版,支持在业务上 可给 每个单独影城 分发定制单独的小程序版本)

    1个 影城行业 微信小程序(多商户.多平台版), 影业连锁 多商户.多平台版微信小程序.(基于多平台版,支持在业务上 可给 每个单独影城 分发定制单独的小程序版本) 资讯QQ: 876635409  ...

  7. QWaiteCondition思考3

    QWaitConditioin::wait() 接收一个mutex作为参数,这个mutex应该被调用线程初始化为锁定状态.在线程进入休眠状态(waite)之前,mutex会被解锁.当线程被唤醒(Wak ...

  8. EtherCAT主站对PHY有要求?

    /********************************************************************** * EtherCAT主站对PHY有要求? * 说明: * ...

  9. Number.toLocalString() js

    地址链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocal ...

  10. Vue基础之计算属性

    适用场景 设想一个场景,你需要得到一个复杂运算/逻辑的返回值,利用模板内的表达又过长且难以阅读和维护,这时计算属性就可以很好的解决你的问题.看下面的例子: <!DOCTYPE html> ...