javascript - jquery变量作用域问题

Question

我有一个带有两种方法的聊天类:updateChat 和 sendChat。

//chat.js
var state;
var room;

function Chat (theRoom) {
    this.update = updateChat;
    this.send = sendChat;
    this.room = theRoom;
}

function updateChat(){    
        alert('ROOM: '+this.room);

        $.ajax({
            type: "POST",
            url: "/chat/process.php",
            data: {
                'function': 'update',
                'state': state,
                'room': this.room
            },
            dataType: "json",
            success: function(data){
                if(data.text){
                    for (var i = 0; i < data.text.length; i++) {
                        $('#chat-area').append($("<p>"+ data.text[i] +"</p>"));
                    }
                }
                if(data.state)
                    state = data.state;
            }
        });
    }
}

//send the message
function sendChat(message, nickname)
{

    alert('A'+state); //20

    //XXX        
    updateChat();

    alert('B'+state); //20

    $.ajax({
        type: "POST",
        url: "/live-event/chat/process.php",
        data: {
            'function': 'send',
            'message': message,
            'nickname': nickname,
            'room': this.room
        },
        dataType: "json",
        success: function(data){

alert('C'+state); //wrong!: 2 //it should be 20!

                    //XXX        
            updateChat();

alert('D'+state); //21

        },
    });
}

聊天对象的构造函数:

var chat =  new Chat(4); //4 = the number of the chat room

chat.send('test', 'tester');

我的问题是标有 XXX 的位置处的方法调用。在 updateChat() 方法中，如果我像这样调用 updateChat 方法，则 this.room 是未定义的。但我需要传递房间号才能获得正确的状态(状态只是聊天室文本文件中的行数)。

我认为这是变量范围或未在对象上下文中调用方法的问题。

Answer 1

在调用这些方法时，您需要维护 this，因此不要这样:

updateChat();

您可以使用.call()维护上下文(因此 this 不会恢复到被调用函数内的 window)，如下所示:

updateChat.call(this);

或者调用对象上的方法为@ casablanca指出如下:

this.update();

<小时/>

还有一个问题，this 不会是您在 $.ajax() 回调中想要的内容，默认情况下它将是 ajax 设置对象，因此您需要设置 context 选项来维护它，如下所示:

$.ajax({
  context: this,
  type: "POST",
  //...rest of your current options/methods