cocos creator 2.4 this.node.on方法中回调函数参数怎么传

Question

for(let i = 0;i<3;i++){
           this.node.on(cc.Node.EventType.TOUCH_END,function(){
                this.buyBtn(i);
            },this);
}

    buyBtn:function(p1,p2){
        cc.log("点击成功" + p1);
    }

代码执行结果

for(let i = 0;i<3;i++){
           this.node.on(cc.Node.EventType.TOUCH_END,this.buyBtn(i),this);
}

    buyBtn:function(p1,p2){
        cc.log("点击成功" + p1);
    }

代码执行结果

为什么会这样？

Answer 1

第一种写法中，每次循环都会创建一个新的匿名函数作为回调函数，而且在回调函数中传入的参数 i 是一个闭包变量，每个匿名函数都引用了不同的 i，所以当点击按钮时，每个回调函数中的 i 都是最后一次循环的值 2。

而第二种写法中，this.buyBtn(i) 直接调用了 buyBtn 函数，并且将返回值作为回调函数，因为 buyBtn 函数没有返回值，所以回调函数为 undefined，所以点击按钮时没有任何反应。

正确的写法应该是将回调函数改为箭头函数，并在箭头函数中传入参数 i，如下所示：

for(let i = 0;i<3;i++){
           this.node.on(cc.Node.EventType.TOUCH_END,()=>{
                this.buyBtn(i);
            },this);
}
 
    buyBtn:function(p1,p2){
        cc.log("点击成功" + p1);
    }