很難解釋有關「this」範圍的JavaScript問題

Question

對於標題很抱歉，但在這個問題上很難標題（隨便推薦一個更好的標題）。

我的問題是通過這種的jsfiddle最好的解釋：http://jsfiddle.net/ryLhcn4q/2/

CS = {}; 

CS.OverviewController = { 
    foo: "bar", 

    render: function() { 
     console.log("Rendering. foo = " + this.foo); 
    }  
}; 

CS.handleClick = function(callback) { 
    console.log("handleClick"); 

    if (callback) { 
     callback(); 
    } 
}; 

$("button").click(function(e) { 
    CS.handleClick(CS.OverviewController.render); 
}); 

如果你點擊該按鈕時，控制檯指示的foo值undefined。如何獲得this的正確範圍，以便控制檯將bar指定爲foo的值？

Answer 1

您應該使用

CS.handleClick(CS.OverviewController.render.bind(CS.OverviewController)); 

.bind定義函數的上下文。換句話說，它將其對象設置爲this。

您的示例不起作用，因爲您將函數從其上下文中提取出來。 this指向全局範圍（即window對象）。所以：

window.foo = 'global'; 
$("button").click(function(e) { 
    CS.handleClick(CS.OverviewController.render); 
}); 

將輸出global - >jsfiddle

Answer 2

PFB的代碼，這將工作

CS = {}; 

CS.OverviewController = { 
    foo: "foo", 

    render: function() { 
     console.log("rendering. foo = " + this.foo); 
    }  
}; 

CS.handleClick = function(e, context, callback) { 
    console.log("handleClick"); 

    if (callback) { 
     context[callback](); 
    } 
}; 

$("button").click(function(e) { 
    CS.handleClick(e, CS.OverviewController, 'render'); 
}); 

JsFiddleUpdated

您還可以使用 「應用」 或 「呼叫」