javascript - "this"在 swiper 事件中是 Window，而不是 swiper

Question

我有一个带有多个 slider 的简单页面。每个 slider 由三个 slider 组成；左、中、右。如果另一个 slider 发生变化，我想将所有 slider 重置到中间。可以将其想象为一个用户界面，您可以在其中向左或向右滑动以显示可以对列表中的项目执行的操作。我不希望同时显示多个项目的操作 - 因此滑动其中一个项目会将所有其他项目重置回初始状态。

文档说，在 slider 事件中，“this”将始终引用有问题的 slider ，但由于某种原因它引用了窗口，我不明白为什么。

这是一个简单的实际例子 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', () => ...)