Question

我是Jquery的新手并阅读'JQueryInAction'一书。我从这本书中看到了这个例子：

$(function(){
    $('*').each(function(){
        var current = this;
        this. onclick = function(event) {
            if (!event) event = window.event;
            var target = (event.target) ? event.target : event.srcElement;
            say('For ' + current.tagName + '#'+ current.id +
                ' target is ' + target.id);
        }
    });
});

我真的不明白在第3行使用局部变量current而不是this。

注意：我知道JavaScript，我理解closures以及this closure内部this不可用但但事实并非如此，current在事件中可用处理程序。这里find $HOME/.m2/repository/ \ -name "*-SNAPSHOT" \ -type d \ -mtime +60 \ -print \ -prune \ -exec rm -r "{}" \;有什么意义。

Answer 1

在引入ES6箭头函数之前，所有函数都有自己的this，其值取决于函数的调用方式。

此处事件处理程序有自己的this，但也需要访问其封闭词汇上下文的this，但它显然不能同时使用this。要解决此问题，外部函数的this值将保存到一个新变量中，因此可以在处理程序中使用它而不会出现问题。

ES6 Arrow functions没有自己的this或arguments;而是使用封闭执行上下文的this值。

您的代码可以重写为：

$('*').each(function() {
  this.onclick = (event) => {
    if (!event) event = window.event;
    var target = (event.target) ? event.target : event.srcElement;
    say('For ' + this.tagName + '#'+ this.id + ' target is ' + target.id);
  }
});

JqueryInAction Book示例使用局部变量而不是这个

1 个答案: