这是 javascript Closure 的候选人吗？答案

【问题标题】：Is this a candidate for javascript Closure?这是 javascript Closure 的候选人吗？
【发布时间】：2017-08-28 20:47:52
【问题描述】：

我让这段代码工作。但是，我一直在考虑这是否是实施关闭的候选者。听我说。

我想这样做：

$(".trigger").click(function() {    
    $(this).parents(".heading").next(".list").slideToggle("slow", function() {
        $(this).toggleClass("close");
        $(this).parents(".heading").toggleClass("close");
    });

});

执行在slideToggle 函数this 中时的问题似乎并不指向trigger。我找到了解决方法：

$(".trigger").click(function() {    
    var self = $(this);
    $(this).parents(".heading").next(".list").slideToggle("slow", function() {
        $(self).toggleClass("close");
        $(self).parents(".heading").toggleClass("close");
    });  
});

它有效。但我想知道它是否是实施关闭的好人选？并在此过程中提高代码质量。谢谢。

【问题讨论】：

你认为闭包是什么？
为什么this 会指向另一个函数中被点击的元素？您是否阅读过slideToggle 的文档？在回调 this 内将是滑动的元素。
如果self 已经是$(this)，为什么还要将self 包裹在$() 中？
第二个例子很好（除了重新包装^），我不知道你如何定义一个闭包，从技术上讲你已经有了一个，但你肯定不需要另一个。
当你在 slideToggle 函数中说 $(this) 时，$(this) 指的是正在调用什么 slideToggle，所以在这种情况下 next(".list") 不是什么你要。您的解决方法很好，或者，如下面的回答，使用 es6 魔法

标签： javascript jquery closures

【解决方案1】：

闭包在这里并不是特别有用，因为它的目标是不同的。但是你可以使用箭头函数的行为，它使用词法上下文：

$(".trigger").click(function() {    
    $(this).parents(".heading").next(".list").slideToggle("slow", () => {
        $(this).toggleClass("close");
        $(this).parents(".heading").toggleClass("close");
    });
});

现在，this 将不会被更改：箭头函数不知道任何上下文绑定，只是坚持词法上下文，这意味着 this 与 this 回调函数中的 this 相同。

【讨论】：