0

我正在尝试使用 enquire.js 在屏幕尺寸较小时触发我的 bxslider 重新加载，以显示更少的图像。

我已经注册了一个屏幕宽度，如下所示。

enquire.register("screen and (max-width:900px)", {
    match: this.ChangeSliderDown,
    unmatch:this.ChangeSliderUp
});

现在作为过渡的一部分，我需要根据与当前类的原型关联的变量进行计算。

ChildCarousel.prototype = {
  ...

    ChangeSliderUp: function()
    {
        var maxSlides = (this.ourCarouselCollection.length < 3) ?  1 : 3;
            ...
    }
}

在我引用的所有其他函数中this，我可以访问变量，例如 enguire js 实例中的 ourCarouselCollection，我得到了作为 register 调用结果的对象。

为什么会发生这种情况，是否有可能改变它？

4

2 回答 2

3

添加绑定（此方法解决了问题

enquire.register("screen and (max-width:900px)", {
    match: this.ChangeSliderDown.bind(this),
    unmatch:this.ChangeSliderUp.bind(this)
});
于 2014-01-30T02:42:59.207 回答
1

this的值与作用域无关，它在执行上下文中解析，并由调用或绑定设置。此外，约定只有被称为构造函数的函数的名称以大写字母开头（因此ChangeSliderUp应该是changeSliderUp）。

期望调用ChangeSliderUp方法，并将this引用ChildCarousel 的一个实例作为它的this。当您分配对函数的引用时，例如：

match: this.ChangeSliderDown

那么函数将在没有this设置为实例的情况下被调用，并将默认为全局对象或在严格模式下未定义。

您可以按照 Bluephlame 的回答使用bind，或者使用类似的闭包：

// Assuming that this referenes an instance of ChildCarousel
// where this code is running
var carousel = this;

enquire.register("screen and (max-width:900px)", {
    match: function() {carousel.ChangeSliderDown();},
    unmatch: function() {carousel.ChangeSliderUp();}
});

但我无法测试。它应该确保函数作为实例的方法被调用，因此将this设置为实例。

于 2014-01-30T02:45:04.083 回答