星际巡航—玩转javascript中this！
星际巡航—玩转javascript中this！
在javascript异步编程、函数式编程中，有两个至关重要的技术callback与this变量，又称之为回调与当前对象上下文。
一、星际迷航
javascript中的回调函数，我借用科幻小说的比喻，有点类似不同的宇宙空间。而且宇宙空间有两类：
- 一类就像从地球到火星，在代码上的表现是，在同一个时刻(帧)代码执行有严格的先后顺序。
- 另一类回调函数，像从当下去了天堂或冥界，跟现在下不属于同一个宇宙空间，代码在未来某一时刻才会进入。
而且这些宇宙空间还相可以互嵌套，用程序思维理解可以用同步和异步来区别。
举个列子，先看看从地球到火星的旅行：
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);这里解释一下，注意两点：
- 箭头函数中参数只有一个时，可以省略参数上的圆括号。
- 箭头函数中函数体只有一行代码，可以省略大扩号{}直接写表达示，同时将表达式的值默认为函数返回值，所以不需要写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);
}
});
}
}
};代码有点长，来看看演示效果：
在一些场景中，按钮是由Button组件再加上一些图片点缀而成，同时Button还需要有可用和禁用状态，但原生Button只能控制自己节点上的Sprite。上面的代码通过拦截Button的状态切换函数，做了点小动作，将Button节点下的所有Sprite和Label都给置灰了。
Shawn还尝试了，将bind过的函数，再调用call，函数执行时的this任然是之前bind时对象，他不受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方法，降龙诀的精髓有两点：
- 控制this上下文的变化
- 可以将参数用一个数组打包进行传递
函数执行任然是像普通调用一样，在平时用的地方不多，但在类的继承、执行基类函数、模拟面向对象等技术上是离不开它的。
第四式：一阳指
箭头函数 () => { … }
一阳指又称箭头函数，所指之处的函数this上下文，皆为当时调用时的this，看似平淡无其，实则威力巨大。
//模拟一个组件中的点击事件
_onButtonTouchEnd() {
//定义一个箭头函数，当前this为组件对象
let callback = (arg1, arg2) => {
//此刻的this为定义函数时的this上下文对象
cc.log(this);
}
callback(xxx, yyy);
}
凝神诀和召唤诀的运用大多数是为了修正匿名函数中的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++的狼，骨子里其实是函数式编程语言。
有人可能要问，用武功招数去巡航浩瀚的宇宙，感觉有点牵强！我的回答是，宇宙就在你的鼓掌之中！
热门文章TOP10，带你遨游奎特尔星球
本文分享自 Creator星球游戏开发社区 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体分享计划 ，欢迎热爱写作的你一起参与！