“ this”在swiper事件中是Window，而不是swiper

Question

我有一个简单的页面，其中包含多个滑块。每个滑块由三张幻灯片组成；左，中和右。如果要更改另一个滑块，我想将所有滑块重置到中间。可以将其视为一个UI，在其中向左或向右滑动以显示可以对列表中的项目执行的操作。我不希望多个项目同时显示其动作-因此，轻扫一项应将所有其他项重置为初始状态。

[文档说，在滑块事件中，“ this”将始终引用所涉及的滑块，但由于某种原因，它引用的是Window，但我不知道为什么。

这里是一个简单的例子，在https://codepen.io/gurubob/pen/MWawvQK中使用

$(() => {
    var swipers = [];

    function initSwiper(element) {
        var swiper = new Swiper(element, {
            // Optional parameters
            direction: 'horizontal',
            loop: false,
            initialSlide: 1,
            on: {
                slideChange: () => {
                    // The docs say that "this" is always the instance of
                    // the swiper in any events, but here "this" is the
                    // window and I can't spot why????
                    // Change all other swipers back to initial slide:
                    var thisSwiper = this;
                    swipers.forEach(swiper => {
                        if(swiper != thisSwiper) swiper.slideTo(1);
                    })
                }
            }
        })

        swipers.push(swiper);
    }

    $(function(){
        $('.swiper-container').each((idx, element) => {
            initSwiper(element);
        });
    })
})

你能发现我在做什么错吗？

Answer 1

这是因为您正在使用箭头功能作为传递给Swiper的选项中slideChange属性的值。

箭头功能使用父范围而不是使用新的范围：Arrow functions MDN

您可以只使用swiper变量而不是使用this：

slideChange: () => {
                    swipers.forEach(swiperItem => {
                        if(swiper != swiperItem) swiperItem.slideTo(1);
                    })
                }

另一个选项是分别添加事件侦听器：

var swiper = ...;
swiper.on('slideChange', () => ...)