Javascript 避免丢失此引用及其原因';发生什么事了
我这把小提琴有个错误--> (这是没有错误的版本)--> 其中有一个模块(与主应用程序类似),一个处理Ajax调用的Javascript 避免丢失此引用及其原因';发生什么事了,javascript,callback,this,module-pattern,Javascript,Callback,This,Module Pattern,我这把小提琴有个错误--> (这是没有错误的版本)--> 其中有一个模块(与主应用程序类似),一个处理Ajax调用的Module.AjaxInterface,一个Module.Modules.Inbox(执行与电子邮件收件箱相关的任务),以及一个处理多个模块以显示页面的Module.Pages.Gmail。所有这些都是使用模块模式完成的 现在,您可以看到有很多回调。我想知道在这些通话中,这个会发生什么 我不明白的是此引用发生了什么,以及如何保存它: getMessages: function(p
Module.AjaxInterface
,一个Module.Modules.Inbox
(执行与电子邮件收件箱相关的任务),以及一个处理多个模块以显示页面的Module.Pages.Gmail
。所有这些都是使用模块模式完成的
现在,您可以看到有很多回调。我想知道在这些通话中,这个
会发生什么
我不明白的是此
引用发生了什么,以及如何保存它:
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
,后者反过来调用invokeRender()
。现在,在虚拟世界里,我有一个:
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";
}
我的问题是。。。
此
引用发生了什么变化?为什么要更改为窗口
?我怎样才能修好它?我知道我可以使用call
或apply
,但函数invokerender
正在ajax界面上调用,对模块的引用已丢失(除非我使用调用者
,我不能在严格的下使用)。我知道我可以将这个
传递给Ajax接口
来保存它,但我真正想要的是真正理解正在发生的事情并创建一个优雅的解决方案。这个
始终是调用函数的对象。它改变了this.defaultRender
不是在该时间点附加到this
对象的方法。它只是一个正在传递的函数。如果要保证此
在该上下文中随方法一起移动,则需要将此
绑定到该函数。类似这样的内容(使用闭包):
Underline.js框架使用.bind()
可以更好地实现这一点。该
始终是调用函数的对象。它改变了this.defaultRender
不是在该时间点附加到this
对象的方法。它只是一个正在传递的函数。如果要保证此
在该上下文中随方法一起移动,则需要将此
绑定到该函数。类似这样的内容(使用闭包):
Underline.js框架使用.bind()
做这件事有一个相当好的方法。它只是一个函数的引用/指针,调用函数时的上下文取决于很多因素:
a.b.c = this.pretendRender;
a.b.c();
此
将是b
内部的c
,因为c
引用的函数被称为b
此
将设置为全局对象
,因为a
引用的函数被称为全局对象的属性
c
中的this
将是原始的this
,因为c
引用的函数是一个绑定函数,它调用原始函数并将上下文设置为原始this
.bind
存在于现代浏览器中,但它是可用的
这个
将是someObject
内部的c
,因为它是显式给定的
因为您使用的是jQuery,而不是this.invokeRender.bind(this)
您可以使用successCallback:$.proxy(this.render,this)
此函数仅是函数的引用/指针,调用函数时此函数的上下文取决于许多因素:
a.b.c = this.pretendRender;
a.b.c();
此
将是b
内部的c
,因为c
引用的函数被称为b
此
将设置为全局对象
,因为a
引用的函数被称为全局对象的属性
c
中的this
将是原始的this
,因为c
引用的函数是一个绑定函数,它调用原始函数并将上下文设置为原始this
.bind
存在于现代浏览器中,但它是可用的
这个
将是someObject
内部的c
,因为它是显式给定的
因为您使用的是jQuery,而不是this.invokeRender.bind(this)
您可以使用successCallback:$.proxy(this.render,this)
谢谢您的解释。。。但我正在执行successCallback:this.invokeRender
,(也就是说,将引用传递给该函数,而不是调用函数本身)。如果我这样做me.render.apply(me,参数)代码>,我不是在调用函数吗?此外,该函数的参数应用于Module.AjaxInterface
,该函数在那里执行,在回调(数据、参数)中调用其引用代码>这就是为什么我不知道如何使用apply,因为函数引用被传递,然后在另一个模块中执行。如果不是为函数(){…}
包装调用,它将被调用。这将创建一个匿名函数,稍后将调用该函数,该函数将this
引用保存在me
变量中。好的,我尝试了successCallback:function(data){return me.invokerender.call(me,data);
,该函数返回的addColor未定义
(在此js小提琴-->)谢谢你的解释…但我做的很成功回调:window.a = this.pretendRender;
a();
a.b.c = this.pretendRender.bind( this );
a.b.c();
a.b.c = this.pretendRender;
a.b.c.call( someObject );