匿名函數丟失范圍

Question

為什么這不起作用？

var img = new Image();
this.dimensions = [ ];
var m = this;
img.onload = function(){ 
    return function(){
        m.dimensions = [ this.width, this.height ]; 
    }
};
img.src = 'images/whatever.jpg';


console.log(this.dimensions);
[]

（在JS對象的內部，因此為“ this”）

編輯：工作代碼

var img = new Image();
this.dimensions = [  ];
var m = this;
img.onload = function(){ 
    m.dimensions.push(this.width, this.height);  
    console.log(m.dimensions) // had to wait
};
img.src = 'whatever.jpg';

Answer 1

這是因為this改變新函數定義中的含義。 您可以通過將其緩存在局部變量中來解決此問題。 在這里，這已經完成； 您將其保存在變量m 。 因此，請使用m代替this 。

var img = new Image();
this.dimensions = [ ];
var m = this;
img.onload = function(){ 
    return function(){
        m.dimensions = [ m.width, m.height ]; 
    }
};
img.src = 'images/whatever.jpg';

這是一個很好的教程，解釋了this變化如何在不同上下文中的含義： http : //javascriptweblog.wordpress.com/2010/08/30/understanding-javascripts-this/

Answer 2

考慮以下代碼不會發出警報：

img.onload = function(){ 
    return function(){
        alert("hi")
    }
};

然后考慮標准（可能需要）“雙重關閉”：

img.onload = (function(m){ 
    return function(){
        alert(m)
    }
})(this)

快樂的編碼。

Answer 3

您確定在加載圖像后正在運行console.log（this.dimensions）嗎？ 您添加到img.onload中的是一個回調函數，該函數將在圖像完成DOM加載后運行。 在img完成加載之前，尚未設置m.dimensions。 添加回調后，該映像不會立即加載，但會異步加載並且可以隨時完成。

換句話說，您在尚未設置尺寸之前（在運行onload回調之前）正在運行console.log（this.dimensions）。 我敢打賭，如果您將console.log包裝在setTimeout調用中並說5秒鍾，那么它將記錄您的期望。