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 - ＆gt; 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

你也可以使用＆＃34; apply＆＃34;或者＆＃34;打电话＆＃34;

很难解释关于“这个”范围的JavaScript问题

2 个答案: