Animate CC（Canvas）如何访问e.currentTarget中的变量？

嘿，这个问题我太熟了——Animate CC的Canvas模式（基于CreateJS）和传统AS3的变量作用域逻辑完全不一样，你踩的是典型的作用域坑！我来给你拆解清楚：

为什么你现在得到的是undefined？ #

你在box剪辑里写的两行代码都有问题：

• var myNum = 3;：这个var把变量变成了剪辑内部代码的局部变量，外部的根时间轴完全访问不到这个变量。
• myNum = 5;：不加var的话，这个变量会被挂载到全局window对象上，而不是box这个MovieClip实例本身，所以你用e.currentTarget.myNum去访问实例的属性，自然找不到，返回undefined。

正确的实现方式 #

要让外部能访问到剪辑内部的变量，你需要把变量直接挂载到MovieClip的实例本身，也就是用this来赋值：

步骤1：修改box剪辑内部的代码 #

打开box这个MovieClip的内部时间轴，把原来的代码替换成：

this.myNum = 5; // 直接把变量绑定到当前MovieClip实例上

如果需要覆盖成3，就改成this.myNum = 3;就行，不要加var。

步骤2：根时间轴的代码可以保持（或优化） #

你的根时间轴代码其实没问题，现在修改后就能正常输出了：

this.box.addEventListener("click", clickHandler);
function clickHandler(e) {
    console.log(e.currentTarget.myNum); // 现在会输出5或者3啦
    // 也可以直接写 console.log(this.box.myNum); 效果一样
}

额外提醒 #

Canvas模式下的Animate本质是用CreateJS实现的，所有MovieClip都是JS对象，只有挂载到实例本身（this）的属性，外部才能通过实例访问到，和AS3里的public变量逻辑完全不同，别再用AS3的老思路套啦！

内容的提问来源于stack exchange，提问作者Michael