setTimeout传递对象参数问题

Question

使用vue，SelectItem是绑定的click事件的处理函数，获取当前点击的事件对象e，然后传到setTimeout里给doSomeThing去使用，但是doSomeThing拿到e后输出的e.currentTarget却是null。于是我在SelectItem里console.log了一下，在传入定时器前，target1能够输出正确的currentTarget，但在定时器里面，target2输出为null。如果我先在外面用一个变量保存e.currentTarget，然后在定时器里面输出这个变量却可以了。请问这是为什么？

SelectItem: function(e){

    e.stopPropagation();

    clearTimeout(this.timer);

    var _this = this;

    //var target = e.currentTarget;

    console.log("target1: ", e.currentTarget);

    //console.log("target1: ", target);

    this.timer = setTimeout(function(){

        console.log("target2: ", e.currentTarget);

        //console.log("target2: ", target);

        _this.someData = _this.doSomeThing(e);

    }, 300);

}

此外我试了两种方法传递e，一种是在毫秒数后面写参数，即：

this.timer = setTimeout(function(){

    //_this.doSomeThing(e);

}, 300, e);

另一种是用一个函数把doSomeThing包起来，在setTimeout里调用这个函数：

this.timer = setTimeout(function(){

    this.foo(e);

}, 300);

foo: function(e){

    this.doSomeThing(e);

}

两种方法都不行。

Answer 1

要分清楚e和e.currentTarget的区别。e是对象事件的属性的引用，它有一个叫currentTarget的值，结构大概如下：e = {    currentTarget: "A"}你把e传到函数里，相当于把引用传进去，但是e.currentTarget在后面时刻是会被重置的。过程和下面类似var newE = econsole.log(newE.currentTarget)//有值e.currentTarget = null // 重置，引用指向改变，但不会改变原来e.currentTarget指向的对像的值console.log(newE.currentTarget)//null而你直接保存e.currentTarget当然是有值的。

Answer 2

楼上兄弟回答基本上正确。当你在的setTimeout里的函数执行的时候已经进入了下一个的事件循环“tick”中，e.currentTarget被置为了null。