pass object method as reference in Javascript

Question

when im pressing spacebar, chrome shows error: "Uncaught TypeError: Object # has no method 'Spacebar'"

(firefox does say "this.Spacebar is not a function");

here is the object, which goes to be initialised by "Init();"(on page load...):

function KeyManager() { 
this.mode="none";

this.Spacebar = ChatManagement.submitMessage;
this.KeyPress = function(e) {
        if(e.keyCode==13) {
            this.Spacebar();
        }
    }
this.switchKeySet= function(value) {
    if(this.mode!=value) {
        this.mode=value;
        switch(value) {
            case "login":
            this.Spacebar = LoginManagement.SendLogin;
            break;
            case "chat":
            this.Spacebar = ChatManagement.submitMessage;
            break;              
            default:
            case "none":
            break;
        }
    document.onkeypress=this.KeyPress;
    }
}

Init function:

function Init() {
ChatManagement = new ChatManager();
LoginManagement= new Login();
KeyManagement= new KeyManager();
KeyManagement.switchKeySet("chat");
}

Chat Management Object:

function ChatManager() {
this.submitMessage = function() {
    $("Message").focus();
    var text = $("Message").value; 
    if(text==""){  
        this.write('<p class="warning">Please enter a message');  
        return;  
    }  
    try{ 
        SendMessage(text);  
        this.write('<p class="event">Sent: '+text)  
    } catch(exception){  
    this.write('<p class="warning"> Error:' + exception);  
    } 
    $("Message").value="";
}

}

"this.submitMessage()" of ChatManager works

when i use "console.log(this.Spacebar);" at end of "switchKeySet();" i get the code of "this.submitMessage()".

when i use it at start of "this.KeyPress()", ill get "undefined";

im trying to avoid multiple switch statements and javascript-libaries which have a function for this case.....

does someone know where the error is? ive got the feeling, that "this.spacebar" gets the undefined "this.submitMessage" but init initializes ChatManager first and i press spacebar after init is done...

(or isnt it possible to pass functions around like i tried to?) %_%.

score 1 · Accepted Answer · edited May 23 '17 at 12:27

The problem here is with the 'this' keyword taking a different meaning when you get into the function for this.KeyPress:

this.Spacebar = ChatManagement.submitMessage; // 'this' refers to the KeyManager function 
this.KeyPress = function(e) { 
        if(e.keyCode==13) { 
            this.Spacebar(); // 'this' refers to the caller of the function (keypress event)
        } 
    } 
 ....
    document.onkeypress=this.KeyPress;  
  }

Check out the answers to How does the "this" keyword work? for a clearer picture but it looks like you need to change your code to something like:

function KeyManager() {
var self = this;      
self.mode="none";     

self.Spacebar = ChatManagement.submitMessage;     
self.KeyPress = function(e) {     
        if(e.keyCode==13) {     
            self.Spacebar();     
        }     
    }     
self.switchKeySet= function(value) {     
    if(self.mode!=value) {     
        self.mode=value;     
        switch(value) {     
            case "login":     
            self.Spacebar = LoginManagement.SendLogin;     
            break;     
            case "chat":     
            self.Spacebar = ChatManagement.submitMessage;     
            break;                   
            default:     
            case "none":     
            break;     
        }     
    document.onkeypress=self.KeyPress;     
    }     
}

i never thought about a connection like this(haha...), thanks :D — Hagorath, May 03 '12 at 12:57

pass object method as reference in Javascript

1 Answers1