jQuery的調整大小失去「這個」參考包括

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); 

當圖（）被調用構造函數或初始化後一切正常，但是當圖（）正在被調整大小稱爲函數，它不能再通過'this'來訪問實例變量。

我可以調用構造函數的外側來修復此問題，但希望在類中保持整齊。

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指向窗口。

另一個拙劣的方法是使用匿名回調函數並使用緩存這個變量。

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