如何正确使用Javascript“this”就我而言？

Question

我有以下（简化的）代码：

var myModule = {

    submitDummyForm: function(){ 
        console.log(this); // the right object is logged out
        var that = this; // keep a reference
        $.ajax({
            type:'POST',
            url: 'http://localhost/',
            data: {dummyData: 'something'},
            dataType: 'json',
            success: that.dummyFormSuccess

        });
    },

    dummyFormSuccess: function(data){ 
        console.log(this); // 'this' is logged out as some foreign object, most probably jQuery.ajax object
    }
}

它会导致“this”在 dummyFormSuccess 中丢失，无论我使用 this.dummyFormSuccess 还是 that.dummyFormSuccessfor 作为我的 ajaxSubmitForm() 的参数。

但是下面的代码会根据我的需要执行：

var myModule = {

    submitDummyForm: function(){ 
        console.log(this); // the right object is logged out
        var that = this; // keep a reference
        $.ajax({
            type:'POST',
            url: 'http://localhost/',
            data: {dummyData: 'something'},
            dataType: 'json',
            success: function(data) {
                 that.dummyFormSuccess(data);
            }
        });
    },

    dummyFormSuccess: function(data){ 
       console.log(this); // now 'this' is logged out correctly as the real myModule object
    }
}

我仍然不太熟悉 Javascript 的高级主题，但我已经知道，“this”可能会被重新定义，具体取决于它的使用位置。我想如果我使用“that”来存储对“this”的引用，它也应该将我的“this”保留在被调用的函数中。看起来很奇怪，我可以在环绕函数中调用 that.dummyFormSuccess(data) 并且它在内部得到正确的“this”，但如果我只是将它分配给 $.ajax success，我的“this”就会丢失。

任何人都可以解释一下，“this”在我的案例中迷失在哪里以及为什么它在第二个示例中工作正常？这是 jQuery 的问题（也许 jQuery.ajax() 在我的例子中以某种方式覆盖了我的“this”）还是只是该语言的一个功能？

Answer 1

一切都是正确的。您的 this 在第一个示例中丢失，因为您将分配函数 that.dummyFormSuccess 到 jQuery ajax 对象的 成功。因此，这样，在 jQuery 的深处，它被称为类似 ajax.success 的东西。因此，this 被 ajax 对象覆盖。

使用第二种方法，您创建一个匿名函数并将其分配给 success。因此，在匿名函数中，this 指向 ajax 对象，但 that 变量是可访问的并且尚未被覆盖。

Answer 2

您误解了这个。

this 参数的值由调用站点（调用您的函数的代码）决定。
当您传递 that.dummyFormSuccess 或 this.dummyFormSuccess 时，您只是传递一个恰好来自您的对象的函数。
this 或 that 对象仅用于检索函数实例；它不与该功能捆绑在一起。

当 jQuery 调用您的回调时，它总是在 jqXHR 对象的上下文中调用它。
当您传递 function(data) { that.dummyFormSuccess(data); 时}，您的函数表达式将在此 jqXHR 对象的上下文中调用。
但是，您的回调随后会在 that 的上下文中调用 dummyFormSuccess，因此它的 this 正是您想要的。

Answer 3

您可以将 JavaScript 中的“this”视为函数参数列表中的附加参数。
因此，函数的每次调用都会在 this 参数中包含自己的值。以下是 JS 中调用函数的三种方式

• foo(); - 函数内部 this 将被设置为默认值
  命名空间对象（浏览器环境中的窗口）。

• obj.foo(); - this 将在 foo() 中获取 obj 引用。

• foo.call(obj); - 将调用“foo”，并将 this 设置为 obj（与上面相同）

Answer 4

由于函数也可以表示对象（并且它是对象），因此 this 表示该函数。 （不同范围）

您需要做的是将 var that = this; 放在 dummyForm : function （上面的行）之外，然后执行 console.记录（那个）。

var that = this;
dummyFormSuccess: function(data){ 
   console.log(that); // now 'this' is logged out correctly as the real myModule object
}