Javascript 当更改并尝试进行一些调整时，类中的元素数组将变得未定义

我构建了一个对象，并按类名收集所有元素，然后在更改时，我想对它们做一些工作。当我构造对象时，它可以工作，但在

WidthChecker（）

内，当对宽度执行某些操作时，会将对象更改为

未定义的

class SlickController {
    constructor () {
        this.$mobileSlicksCarousels;
    }
    Init() {
        this.$mobileSlicksCarousels = document.getElementsByClassName("slick_carousels_mobile-only"); // view in console says this is valid, I see the objects
        this.WidthChecker();
    }
    WidthChecker() {
        var width = $(window).width();
        $(window).on('resize', function() {
            console.log(this.$mobileSlicksCarousels); // they become undefined in here, lost and none of the content afterwords be seen
            if ($(this).width() !== width) {
                width = $(this).width();
                if (width < 491) {
                    this.$mobileSlicksCarousels.forEach( carousel => {
                        this.SlickMobile(carousel);
                    });
                } else if (width > 490) {
                    this.$mobileSlicksCarousels.forEach( carousel => {
                        this.UnSlickMobile(carousel);
                    });
                }
            }
        });
    }

    SlickMobile (toSlick) {
        console.log(toSlick);
        toSlick.slick();
    }

    UnSlickMobile (unSlick) {
        unSlick.slick('unslick');
    }
}


// call and start width checker
slick_Controller.Init();

类控制器{
构造函数（）{
这是$mobileslickscarouses；
}
Init（）{
this.$mobileSlicksCarousels=document.getElementsByClassName（“slick_carousels_mobile-only”）；//控制台中的视图表明这是有效的，我看到了对象
这个.WidthChecker（）；
}
宽度检查器（）{
变量宽度=$（窗口）.width（）；
$（窗口）.on（'resize'，function（））{
console.log（this.$mobileSlicksCarousels）；//它们在这里未定义，丢失，并且看不到后面的内容
if（$（this）.width（）！==宽度）{
宽度=$（this）.width（）；
如果（宽度<491）{
这是。$mobileSlicksCarousels.forEach（carousel=>{
这是滑溜车（旋转木马）；
});
}否则，如果（宽度>490）{
这是。$mobileSlicksCarousels.forEach（carousel=>{
这是一个不可点击的移动（旋转木马）；
});
}
}
});
}
SlickMobile（toSlick）{
console.log（toSlick）；
toSlick.slick（）；
}
不舔手机（不舔）{
不舔。光滑（“不舔”）；
}
}
//调用并启动宽度检查器
slick_Controller.Init（）；

---

我假设问题出在调用

$（window）.on（'resize'，function（）时{

因为函数看不到父变量，但我不知道如何在resize上直接调用函数。

您可以在跳转到函数之前将

此

存储在变量中，或者您可以绑定函数，但随后您会丢失jquery上下文，无法使用

$（this）

表达式

看一下示例

类测试{
构造函数（）{
这个属性=1；
}
Func（）{
变量宽度=$（窗口）.width（）；
常数=this；
$（窗口）.on（'load'，function（）{
console.log（that.property）；
log（$（this.width（））；
});
}
Func1（）{
变量宽度=$（窗口）.width（）；
$（window）.on（'load'，（function（））{
console.log（this.property）；
log（$（window.width（））；
}).约束（这个）；
}
Func2（）{
变量宽度=$（窗口）.width（）；
$（window.on（'load'，this.OnResize.bind（this））；
}
OnResize（事件）{
console.log（this.property）；
log（$（event.target.width（））；
}
}
常量测试=新测试（）；
test.Func（）；
test.Func1（）；
test.Func2（）；

---

使用箭头函数，使事件处理程序中的

this

不会更改，或者将

this

存储在事件处理程序之外的另一个变量中，并使用该变量代替事件处理程序中的

this

。