避免丢失此参考及其发生原因

Question

我有这个有错误的小提琴 --> http://jsfiddle.net/Osoascam/AkZZr/6/ （这是没有错误的版本）--> http://jsfiddle.net/Osoascam/AkZZr/7/

其中有一个模块（如主应用程序）、一个处理 Ajax 调用的Module.AjaxInterface、一个处理与电子邮件收件箱相关的任务的Module.Modules.Inbox 和一个处理多个显示页面的模块。所有这些都是使用模块模式完成的。

现在，您可以看到有很多回调。我想知道this 在这些电话中会发生什么...

我不知道this 参考发生了什么以及如何保存它：

getMessages: function(params) {
                var parameters = params || {};
                params = {
                    // Please note I'm using this, which equals the module
                    successCallback: this.pretendRender,
                    successCallbackParameters: parameters,
                    json: params.json
                };
                var test = new Module.AjaxInterface(params);
                test.ajaxCall();
            },

因此，对模块本身内部函数的调用是有效的……然后，它调用test.ajaxCalls，而后者又调用pretendRender()。现在，在pretendRender 我有这个：

 pretendRender: function(data, parameters) {
                // LINE 106 that is causing the ERROR
                // It says "this.addColor() is not defined and THIS = window now
                data.color = this.addColor();
                parameters.successCallback(data);
            },

            addColor: function() {
              return "#AD9";
           }

我的问题是...this 引用发生了什么？为什么改成window？我该如何解决？我知道我可以使用call 或apply，但是函数pretendRender 正在AjaxInterface 上被调用，并且对Modules.Inbox 的引用已经丢失（除非我使用caller，我不能在"strict") 下。我知道我可以将this 传递给AjaxInterface 来保留它，但我真正想要的是真正了解正在发生的事情并创建一个优雅的解决方案。

Answer 1

this.pretendRender 只是一个函数的引用/指针，函数调用时this 的上下文取决于很多东西：

a.b.c = this.pretendRender;
a.b.c(); 

this 将在 c 内成为 b，因为 c 引用的函数被作为 b 的属性调用

---

window.a = this.pretendRender;
a(); 

this 将设置为global object，因为a 引用的函数被作为global object 的属性调用

---

a.b.c = this.pretendRender.bind( this );
a.b.c();

this 将是 c 内的原始 this 无论如何，因为 c 引用的函数是一个绑定函数，它调用原始函数并将上下文设置为原始 this。 .bind 存在于现代浏览器中，但 must be included to be sure 可用。

---

a.b.c = this.pretendRender;
a.b.c.call( someObject );

this 将在 c 内为 someObject，因为它是明确给出的。

---

由于您使用的是 jQuery，因此您可以使用 successCallback: $.proxy( this.pretendRender, this ) 而不是 this.pretendRender.bind( this );

jsfiddle

Answer 2

this 始终是调用函数的对象。它改变。 this.pretendRender 不是在那个时间点附加到 this 对象的方法。它只是一个正在传递的函数。如果您想保证 this 在该上下文中与该方法一起传播，您需要将this 绑定 到该函数。像这样的东西（使用闭包）：

var me = this;
params = {
    successCallback: function() { return me.pretendRender.apply(me, arguments); },
    ...
}

underscore.js 框架使用_.bind() 提供了更好的方法。