Javascript prototype Methods inside object

Question

I'm trying to create an Object containing other Objects and functions, in a prototype, the relevant part is the UI prototype;

var fChat = function() {
    this.debug = true;
};

fChat.prototype = {
    constructor: fChat,
    Log: function(str){
        if(this.debug){
            console.log(str);
        }
    },
    UI: {
        Login: {
            Show: function(){
                this.Log("UI.Login.Show()");
            }
        }           
    }
};

var fChatInstance = new fChat();
fChatInstance.UI.Login.Show();

When i call fChatInstance.UI.Login.Show() It give me an error: Uncaught TypeError: this.Log is not a function

Is that because by using this is on another scope? Usually i do var self = this;at the start of a prototype, but i don't know how I can do that by using an Object prototype.

this is the object { Show: function() { /*...*/ } }. You can figure that out by debugging within Show and checking this or by doing console.log(this); within Show — David Sherret
– David Sherret, Commented Jul 3, 2015 at 14:22
This is a bit of a strange pattern. So each fChat has it's own singletons of Log, UI? Seems like all of that stuff should be abstracted out into their own unit-of-work "classes" — CodingIntrigue
– CodingIntrigue, Commented Jul 3, 2015 at 14:25
@RGraham it is the first time i use prototypes and "classes", so i can do it in a wrong way. Anyway i initialize only one instance of fChat. — Fr0z3n
– Fr0z3n, Commented Jul 3, 2015 at 14:28
I agree with @RGraham that it's better to split this "class" up into multiple classes. For example, create a Login class and then pass in a Logger class instance in the constructor. Right now that fChat class has multiple responsibilities. — David Sherret
– David Sherret, Commented Jul 3, 2015 at 14:28
Checkout You Don't Know JS: this & Object Prototypes for some good information about this. — Jason Cust
– Jason Cust, Commented Jul 3, 2015 at 14:43

borja gómez · Accepted Answer · 2015-07-03 14:27:29Z

1

Yes. The problem is the javascript dynamic binding of this, to fix it you can set "this" to the object by using bind function. Change the fchat function refactor it like this:

var fChat = function() {
  this.debug = true;
  this.UI.Login.Show =  this.UI.Login.Show.bind(this);
  this.Log =  this.Log.bind(this);
};

answered Jul 3, 2015 at 14:27

borja gómez

1,0498 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript prototype Methods inside object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related