很难解释有关“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

您还可以使用 “应用” 或 “呼叫”