星际巡航—玩转javascript中this!

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

一、星际迷航

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

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

而且这些宇宙空间还相可以互嵌套,用程序思维理解可以用同步和异步来区别。

举个列子,先看看从地球到火星的旅行:

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. 箭头函数中参数只有一个时,可以省略参数上的圆括号。
  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);
               }
           });
       }
   }
};

代码有点长,来看看演示效果:

在一些场景中,按钮是由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方法降龙诀的精髓有两点:

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

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

第四式:一阳指

箭头函数 () => { … }

一阳指又称箭头函数,所指之处的函数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星球游戏开发社区(creator-star)

原文发表时间:2017-12-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券