Question

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

我已经注册了如下屏幕宽度。

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

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

ChildCarousel.prototype = {
  ...

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

在我引用this的所有其他函数中允许我访问变量，例如enguire js实例中的ourCarouselCollection，我得到的是寄存器调用结果的对象。

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

Answer 1

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

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

Answer 2

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

ChangeSliderUp 方法期望使用 this 引用 ChildCarousel 的实例作为其 this 来调用。为函数分配引用时：

match: this.ChangeSliderDown

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

你可以根据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 设置为实例。

在esquire JS中改变'this'的范围

2 个答案: