jQuery Resize 会丢失“this”引用

jquery resize loses 'this' reference

本文关键字：this 引用 Resize jQuery      更新时间：2023-09-26

假设包含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（） 被 resize 函数调用时，它不能再通过"this"访问实例变量。

我可以调用构造函数的 resize 来解决这个问题，但希望将其放在类中以保持整洁。

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

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

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

使用 jquery，您可以使用 $.proxy 来做同样的事情。

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

另一种黑客方法是使用匿名回调函数并使用缓存的此变量。

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