Question

假设包含jquery：

   function FixedPoint(bgWidth) {
        this.bgWidth= bgWidth;

        this.plot();
        $(window).resize(this.plot);

    }

    FixedPoint.prototype.plot = function() {

        console.log(this.bgWidth); //This is undefined when called by resize

    }

    var pt1 = new FixedPoint(1920);

当在构造函数中调用plot（）时或在初始化之后一切正常，但是当调整大小函数调用plot（）时，它不能再通过'this'访问实例变量。

我可以调用构造函数的resize out来解决这个问题，但是希望在类中提供它以保持整洁。

Answer 1

$(window).resize(this.plot);方法this.plot正在window上下文中调用。所以这是预期的行为。 this将指向窗口对象而不是FixedPoint。您可以使用Ecmascript5 function.bind显式绑定上下文。

      $(window).resize(this.plot.bind(this));

使用jquery，您可以使用$.proxy执行相同的操作。

为了提供更多见解，this上下文是根据调用方法的位置设置的（绑定函数除外）。这里可以从窗口对象的resize方法中调用，其中this指向窗口。

另一种hacky方式是使用匿名回调函数并使用缓存此变量。

 function FixedPoint(bgWidth) {
     this.bgWidth = bgWidth;
     var self = this; //cache it here
     $(window).resize(function () {
         self.plot(); //invoke with self.
     });
 }

jquery resize失败＆＃39;这个＆＃39;参考

1 个答案: