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 = e
console.log(newE.currentTarget)//有值
e.currentTarget = null // 重置，引用指向改变，但不会改变原来e.currentTarget指向的对像的值
console.log(newE.currentTarget)//null

而你直接保存e.currentTarget当然是有值的。

Answer 2

楼上兄弟回答基本上正确。

当你在的setTimeout里的函数执行的时候已经进入了下一个的事件循环“tick”中，e.currentTarget被置为了null。