使 'this' 等于 Javascript 函数分配中的调用者答案

【问题标题】：Making 'this' equal the caller in Javascript function assignment使 'this' 等于 Javascript 函数分配中的调用者
【发布时间】：2013-03-22 16:50:26
【问题描述】：

我正在尝试确保我在下面的 caller.receiver 方法中有一个有效的 this 引用。

这是一个简化的示例，但我有一些功能分配，例如：

service.fn = this.receiver

但是，当接收器函数执行时，我希望 this 引用调用者，即我希望将字符串 'Caller - Received' 输出到控制台日志。

var service = {
    name: 'Service',
    fn: null,
    runFn: function () {
        this.fn(arguments);
    }
};

var caller = {
    name: 'Caller',
    receiver: function () {
        console.log(this.name + ' - Received');
    },
    perform: function () {
        service.fn = this.receiver;
        service.runFn();
    }
};

caller.perform();

感谢任何帮助。

【问题讨论】：

在你的函数中使用.apply()设置this的值。
如果你在那里查看你的代码，你将 service.fn 设置为指向 function() { console.log(this.name + ' - Received');在 service 和 this 函数的上下文中，'this' 是对 service 的引用。

标签： javascript function this

【解决方案1】：

Bind对象的方法：

perform: function () {
    service.fn = this.receiver.bind(this);
    service.runFn();
}

【讨论】：

我认为你不能相信绑定本机功能会在所有浏览器中出现
@Adidi 叹息。它不需要任何本机功能，它可以由用户实现。任何框架还提供了一个在所有浏览器中都可以使用的绑定函数……
这看起来不错，最适合我的需要，尽管我已经看到这个问题在不使用 bind() 的情况下解决了。不过我真的没有时间去调查！谢谢@Esailija
@Esailija not true man - IE8 不支持绑定本机 - 当然每个框架都支持它 - 但这是一个纯 js 的问题，所以......
@Adidi 我的意思是 bind 不需要任何魔术，可以在用户代码中实现。相比之下，例如真正需要浏览器支持且无法使用用户代码完成的 getter 和 setter。

【解决方案2】：

您可以将 Recieve 引用传递给函数，然后使用 apply： http://jsfiddle.net/d5tf2/

        var service = {
        name: 'Service',
        fn: null,
        runFn: function (ref) {
            this.fn.apply(ref,arguments);
        }
    };

    var caller = {
        name: 'Caller',
        receiver: function () {
            console.log(this.name + ' - Received');
        },
        perform: function () {
            service.fn = this.receiver;
            service.runFn(this);
        }
    };

    caller.perform();

【讨论】：

感谢您回答@Adidi，正如我对 Dan 所说，当函数执行时我不会引用调用者 - 它本质上是从服务内部调用的，但调用者的接收者函数仍然需要访问调用者对象中的其他属性。

【解决方案3】：

var service = {
    name: 'Service',
    fn: null,
    runFn: function () {
        this.fn(arguments);
    }
};

var getCaller = function(){
    var that;
    return {
        name='Caller',
        receiver: function () {
            console.log(that.name + ' - Received');
        },
        perform: function () {
            that = this;
            service.fn = this.receiver;
            service.runFn();
        }
    }
};
var caller = getCaller();
caller.perform();

有趣的阅读：http://jason.pettys.name/2011/10/06/javascript-this-and-that/

【讨论】：

【解决方案4】：

传递这个

var service = {
    name: 'Service',
    fn: null,
    runFn: function (arguments) {
        this.fn(arguments);
    }
};

var caller = {
    name: 'Caller',
    receiver: function (that) {
        console.log(that.name + ' - Received');
    },
    perform: function () {
        service.fn = this.receiver;
        service.runFn(this);
    }
};

caller.perform();

【讨论】：

感谢 Dan，但当实际调用 fn 函数时，我不会引用调用者。我可能应该说清楚。