在javascript异步编程、函数式编程中，有两个至关重要的技术callback与this变量，又称之为回调与当前对象上下文。

一、星际迷航

javascript中的回调函数，我借用科幻小说的比喻，有点类似不同的宇宙空间。而且宇宙空间有两类：

1. 一类就像从地球到火星，在代码上的表现是，在同一个时刻(帧)代码执行有严格的先后顺序。
2. 另一类回调函数，像从当下去了天堂或冥界，跟现在下不属于同一个宇宙空间，代码在未来某一时刻才会进入。

而且这些宇宙空间还相可以互嵌套，简单理解可以用同步、异步函数来区别。

image.png

举个列子，先看看从地球到火星的旅行：

onLoad() {
    let array = ['1','2','3','4','5'];
    //过虑出数组中的奇数元素
    this._num = 2;
    array = array.map(function(i) {
        return parseInt(i);
    }).filter(function(i) {
        return i % this._num;
    }, this); //注意这里的this参数
}

上面代码中array对象上的map与filter中的匿名函数，就像两个小行星。onLoad外层就是地球，他们是在同一个时空之中，array中的元素像是做了一次星际旅行，断点会从上到下一句一句地执行。

Shawn对es6太过依赖，忍不住写了一行es6的等价代码：

//再看看es6的写法
array = array.map(i => parseInt(i)).filter(i => i % this._num);

这里解释一下，注意两点：

1. 箭头函数中参数只有一个时，可以省略参数上的圆括号(arg)直接写成arg。
2. 箭头函数中函数体只有一行代码，可以省略大扩号{}直接写表达示，同时将表达式的值默认为函数返回值，所以不需要写return。

再来看看Creator中常见的回调用法，在不同的宇宙空间的穿梭：

onLoad() {
    this._button.active = false;
    this.scheduleOnce(() => {
        this._button.active = true;
    }, 5);
}

使用scheduleOnce延时5秒显示_button节点，他与上面的map、filter函数不同的是异步执行。在调试中会发现断点在代码前后跳跃，断点前后跳跃不是关键，关键的是scheduleOnce函数他不会阻塞，不论scheduleOnce函数中的回调函数如何复杂都不会影响当前这一帧的运行效率。

在Creator中cc.loader.loadRes、cc.loader.load就是异步回调的，如果资源已经被加载过了，可以使用cc.loader.getRes通过函数返回值同步获取。理解同步与异步是编写javascript函数的重要心法，善于驾驭异步流程你就能在javascript中自由遨游，使用async.js来控制异步流程是一个高效的作法。

二、搞清楚this是谁

在纷繁复杂的星际旅行中，不论是同步还是异步，最为重要的是不要忘记“我是谁”。No不好意思，搞清楚我不重要，在你人生旅途中，要时间清醒，此刻的你到底是谁更重要。

我是谁

对于javascript中的回调函数来说，函数中的this变量到底是谁，搞不清这个你很可能就会在旅行中回不来了，回到之前代码中的filter中的回调函数：

onLoad() {
    let array = ['1','2','3','4','5'];
    let array = [];
    let this._num = 2;
    array.filter(function(i) {
        return i % this._num;
    }, this); //<-----注意这里的this参数
}

filter的第二个参数this是用来改变回调函数中的this变量，如果不传这个this参数，里面的this._num访问就会有问题。

例如在Creator中有不少需要注册回调的API，后面都会紧跟一个target参数，target将来回调后的this变量。

this.node.on(cc.Node.EventType.TOUCH_START, this.memberFunction, this);

如果你不传入第三个参数this你的代码很可能会挂掉，函数的this上下文默认受调用者所控制。

//模拟一个组件中的点击事件
_onButtonTouchEnd() {
    //定义一个回调函数
    let callback = function() { 
        cc.log(this);  //<----这个this是全局window
    }
    //执行回调函数，函数中的this是全局window
    callback(); 
}

上面代码callback中的this是全局window，这里我使用惯用方式总结了几个大招可以用来改变callback中的this变量。

三、星际巡航

javascript与c/c++、java等语言有个最大区别就是，函数中的this变量是可变的。几乎每个人都会在这一点栽跟头，这个特性既成就了javascript的高度灵活性，但也让不少初学者产生迷惑。改变js函数中this变量的技法我将其称之为：星际巡航术，为的是在迷航中认清自己。

第一式：凝神诀

Function.bind

javascript中所有的函数对象上都有bind方法，执行它将返回一个新的函数变量，这个返回的函数执行时的this上下文由bind的第一个参数所决定。看看在节点事件中的运用：

//去掉了第三个target参数
this.node.on(cc.Node.EventType.TOUCH_START, this.memberFunction.bind(this));

使用bind搞定，是不是很简单，我看好多人是这样做的。但请你思考一下那为什么Array.map、Array.filter、CreatorAPI要设计target参数呢？使用bind注册回调，容易踩到一个坑，稍后说明一下我的理解。我们再稍微深入一点，看看bind更多的用法：

//模拟一个组件中的点击事件
_onButtonTouchEnd() {
    //定义一个回调函数
    let callback = function(name, event) { 
        cc.log(this);         //打印当前this
        cc.log(name, event);  //打印参数 
    }
    //施展绑定诀，将callback中的this绑定为当前函数上下文中的this
    let callback1 = callback.bind(this); 
    //执行回调函数，函数中的this是曾经bind传入参数，这里就是当前组件对象
    callback1('button', 'touchEnd');

    //将callback中的this绑定为当前this上的_button节点对象
    let callback2 = callback.bind(this._button); 
    //执行回调函数，函数中的this是bind传入的_button节点
    callback2('button', 'touchEnd');

凝神诀要义在于bind时的参数设定，就像是搓出一股波动拳，蓄而未发，“啊啰啰啰啰......”就是不“哽”出去。

啊啰啰啰啰......

而且bind函数还可以给函数传递参数，请仔细阅读下面代码：

 //定义一个回调函数
 let callback = function(arg1, arg2) { 
     cc.log(this);         //打印当前this
     cc.log(arguments)     //打印隐藏参数对象 
     cc.log(arg1, arg2);  //打印参数 
 }
 
 //绑定决还可以传入参数，传入的参与会排在原函数定义的参数之前
 let callback1 = callback.bind(this._button, 'button', 'touchEnd');
 //参数已经在bind时传入了，此时可以不用传入参数了
 callback1();
 //如果传入参数，调用时的参数会排在绑定时的参数后面
 callback1(1, 2); //参数顺序：['button', 'touchEnd', 1, 2]

将这股凝聚的能量任意流动（一系列的参数传递、变量赋值），在适合的地方释放出来，其中this变量与参数是由你之前精心设计的，这时会产生情人的效果，是一般静态语言难以做到的。

发动

还需要特别的注意，每一股搓出的一股波动拳都是不同的函数对象。

let func1 = callback.bind(xxx);
let func2 = callback.bind(xxx);
//f1与f2是两个不同的函数对象
f1 === f2;  //返回false

这就是为什么在节点事件注册时使用bind容易掉入进的坑，当你想使用node.off你不能将之前事件回调给删除掉，这就是为什么要给你一个target参数的原因了。

不过Shawn还有更简单的办法注册事件，而且也不需要传入target，因为bind是es5时代的产物，es6有更好用的招数。

第二式：召唤诀

Function.call

你可能在想，Creator的API是如何利用target参数修改的回调中的this的呢？其实与Function.bind一样，javascript中所有的函数对象上都有一个call方法：

//模拟一个组件中的点击事件
_onButtonTouchEnd() {
    //定义一个回调函数
    let callback = function(name, event) { 
        cc.log(name, event); 
    }
    //call的第一个参数是想变换的this上下文，后面为该函数的实际参数
    callback.call(this, 'button', 'touchEnd'); 
}

召唤诀的特点是：随喊随到，立即执行，其中最为重要的是call传入的第一个参数，就是你想变换的this变量，后面紧跟此函数的参数。

召唤

一个更有趣的实践hack一下Creator的cc.Button组件，做个神奇的勾子：

//先保存button状态切换函数
let updateState = cc.Button.prototype._updateState;
//自己写个函数来将他覆盖了
cc.Button.prototype._updateState = function () {
    //执行时的第一句，执行原来保存的_updateState，相当于执行基类函数
    //这里不能直接调用updateState，需要用call将内部this修正为当前button
    updateState.call(this); 
    if (this.node.interactable === this.interactable) {
        return;
    }
    //下面是根据是否禁用，设置button节点下的子节点变灰
    //做了条件判断只在不设置disabledSprite时生效
    this.node.interactable = this.interactable;
    if (this.enableAutoGrayEffect && this.transition !== cc.Button.Transition.COLOR) {
        if (!(this.transition === cc.Button.Transition.SPRITE && this.disabledSprite)) {
            this.node.children.forEach((node) => {
                let sprite = node.getComponent(cc.Sprite);
                if (sprite && sprite._sgNode) {
                    sprite._sgNode.setState(this.interactable ? 0 : 1);
                }

                //原生平台退出 
                if(cc.sys.isNative) {
                    return;
                }
                
                //Label的置灰实现目前只能在web端使用
                let label = node.getComponent(cc.Label);
                if (label && label._sgNode) {
                    let shaderProgram = this.interactable ?
                        cc.shaderCache.programForKey(cc.macro.SHADER_SPRITE_POSITION_TEXTURECOLOR) :
                        cc.Scale9Sprite.WebGLRenderCmd._getGrayShaderProgram();

                    label._sgNode._renderCmd.setShaderProgram(shaderProgram);
                }
            });
        }
    }
};

来看看演示效果：

Shawn还尝试了，将bind过的函数对象，再调用call，this任然是之前bind时的this不受call的第一个参数控制。

let func = callback.bind(xxx);
//执行时func函数的this任然是xxx，函数参数有效
func.call(yyy, arg1, arg2); 

es5的时候call出现的频率是非常高的，但现在使用了es6除了做一些hack行为与面向对象的模拟外，大多数回调都可以用更加简单的一阳指可以搞定。

第三式：降龙诀

Function.apply

javascript中函数的参数变化无穷，参数个数可长可短（参数个数0~n），神鬼莫测，犹如一条游龙！降龙诀就是用来驯服这条善变的怪兽的！

_onButtonTouchEnd() {
    //定义一个回调函数,根据不同的参数个数有不同的处理
    let callback = function() { 
          switch(arguments.lenght) {
              case 1:
                   ...
                   break;
              case 2:
                   ...
                   break;
        }
    }
    //call的第一个参数是想变换的this上下文，后面接一个数组参数
    callback.apply(this, ['button', 'touchEnd']); 

同样的，所有函数上都有一个apply方法，降龙诀的精髓有两点：

1. 控制this上下文的变化，
2. 可以将参数用一个数组打包进行传递，

函数执行任然是像普通调用一样，在平时用的地方不多，但在类的继承、执行基类函数、模拟面向对象等技术上是离不开它的。

第四式：一阳指

箭头函数 () => { ... }

一阳指又称箭头函数，所指之处的函数this上下文，皆为当时调用时的this，看似平淡无其，实则威力巨大。

//模拟一个组件中的点击事件
_onButtonTouchEnd() {
    //定义一个箭头函数，当前this为组件对象
    let callback = (arg1, arg2) => { 
        //此刻的this为定义函数时的this上下文对象
        cc.log(this);
    }
   callback(xxx, yyy); 
}

一阳指.jpg

凝神诀和召唤诀的运用大多数是为了修正匿名函数中的this为当前调用时的this，可显的有点啰哩叭嗦，一记一阳指轻松搞定！

在一阳指还没有被创造之前，使用的是闭包变量来做的:

var self = this;
function callback() {
    //使用self变量，指向调用时的this上下文
    cc.log(self);
    ...
}
callback(xxx, yyy);

此方法也正是Bable编译器将es6转es5时生成的套路。

对于this的控制是凌波微步的内功基本详见《
英雄之舞—凌波微步》，如果运用的不好，就会如文中所讲的，强行走将起来，会造成经脉堵塞的危境！

四、结束

最后总结一下我们介绍的招数

凝神诀—Function.bind
召唤诀—Function.call
降龙诀—Function.apply
一阳指—箭头函数

这些招数都是为了在回调函数中不要迷失this，或都说在回调中可以任意控制this。在javascript中函数是第一位的，函数可以动态生成，可以当参数传递，可以说javascript是披着c/c++的狼，骨子里其实是函数式编程语言。

宇宙在你手中