类中的jquery函数混淆了这个关键字答案

【问题标题】：jquery function inside class confusing this keyword类中的jquery函数混淆了这个关键字
【发布时间】：2013-10-12 01:09:18
【问题描述】：

function chat() {
    this.waittime = 6000;
    this.intUpdate = null;

    this.sendChatUpdate = function (msg) {
        var Chatmsg = '0';
        if (msg > 0) {
            Chatmsg = $('#chatmsg');
            var m = Chatmsg.val();
            Chatmsg.val('');
        }

        var s = $("#chatnick").val();
        var r = $("#chatto").val();

        $.ajax({
            type: 'POST',
            url: 'Chat/ajax/Chat.php',
            data: {
                S: s,
                R: r,
                M: m
            },
            success: function (data) {
                this.ProcessChatReturn(data);
            },
            error: function (data) {
                this.ProcessChatReturn(data);
            }
        });
    }

    this.getUnreadChat = function (mr) {
        var s = $("#chatnick").val();
        $.ajax({
            type: 'POST',
            url: 'Chat/ajax/Chat.php',
            data: {
                S: s,
                UR: 1,
                MR: mr
            },
            success: function (data) {
                this.ProcessChatReturn(data);
            },
            error: function (data) {
                this.ProcessChatReturn(data);
            }
        });

        //clearTimeout(intUpdate);
        $('#chatbox').show();
    }
}

var chat = new chat();
chat.getUnreadChat();

我收到错误“Uncaught TypeError: Object # has no method 'ProcessChatReturn'”

我认为是因为如果在jquery ajax 调用里面使用了“this”。我想引用我的“聊天”对象，但我认为由于将它包含在 jquery ajax 函数中，它不是。

有什么建议可以在该位置引用我的聊天对象吗？

【问题讨论】：

标签： javascript jquery class this

【解决方案1】：

你不能这样做，因为 this 在 ajax succes 回调中指向 jqXHR 对象而不是你的对象上下文。您可以改为将对象缓存到另一个变量并使用它。还有很多其他方法。

this.sendChatUpdate = function (msg) {
    var Chatmsg = '0';
    if (msg > 0) {
        Chatmsg = $('#chatmsg');
        var m = Chatmsg.val();
        Chatmsg.val('');
    }

    var s = $("#chatnick").val();
    var r = $("#chatto").val(), self = this; //Cache this to self.

    $.ajax({
        type: 'POST',
        url: 'Chat/ajax/Chat.php',
        data: {
            S: s,
            R: r,
            M: m
        },
        success: function (data) {
            self.ProcessChatReturn(data); //Invoke it with self
        },
        error: function (data) {
            self.ProcessChatReturn(data); //Invoke it with self
        }
    });
}

你也可以利用ajax设置的context属性。

例如：

   $.ajax({
        type: 'POST',
        url: 'Chat/ajax/Chat.php',
        data: {
            S: s,
            R: r,
            M: m
        },
        context:this, //set the context here
        success: function (data) {
            this.ProcessChatReturn(data); //Invoke it with this
        },
        error: function (data) {
            this.ProcessChatReturn(data); //Invoke it with this
        }
    });

还有其他方法，例如使用 Ecmascript5 function.bind 或 $.proxy 绑定回调函数引用，但在您的情况下，您可以避免这些。

请注意，函数内部的上下文是指调用者的上下文，或者换句话说，函数是从 调用的地方（最后一个语句中提到的绑定函数除外） .在您的情况下，您将 ajax 回调作为匿名 func 引用，它从 jquery ajax 对象调用，因此默认情况下上下文指向该对象

【讨论】：