JavaScript OOP reference approach

Question

Good morning SO, I am moving from the functional programming methodology of JavaScript to the Object Oriented methodology and have a question. In functional programming I could just call a function within another function example:

function a(){
    // do something and when done call function b
    b();
}

function b(){ 
    // does more stuff 
}

Now that I am switching to the OOP approach how would I call a method in an object from another method in the same object. for example:

var myClass = function(){
    this.getData = function(){
        //do a jquery load and on success call the next method
        $('#a').load('file.asp',function(response,status,xhr){
            switch(status){
                case "success":
                    //THIS IS WHERE THE QUESTION LIES
                    this.otherfuntcion();
                break;
            }
        }
    }

    this.otherfunction = new function(){
        // does more stuff
    }
}

p = new myClass();
p.getData();

Can I say this.b() on success to call the method b or do i have to do something else? Thank you in advance.

just as a resource to help you along, too.. http://stackoverflow.com/a/13074081/1257652 — Brett Weber, Feb 26 '14 at 17:23

score 5 · Accepted Answer · answered Feb 26 '14 at 15:45

5

This will be very slow with more methods and a lot of instances. Use prototypes instead:

var myClass = function(){

}
myClass.prototype = {
    getData: function(){
        //do a jquery load and on success call the next method
        $('#a').load('file.asp',function(response,status,xhr){
            switch(status){
                case "success":
                    //THIS IS WHERE THE QUESTION LIES
                    this.otherfunction();
                break;
            }
        }.bind(this))
    },
    otherfunction: new function(){
        // does more stuff
    }
};


p = new myClass();
p.getData();

answered Feb 26 '14 at 15:45

inf3rno

24,976
11
115
197

Isn't `this` inside complete callback referring to jqXHR object? – A. Wolff Feb 26 '14 at 15:46
@inf3rno, apologies ina dvance but I'm new to this style of programming. Why would prototypes be faster? – seroth Feb 26 '14 at 15:51
Because it is a core js feature, so it is implemented in your js engine, for example in v8 by chrome. – inf3rno Feb 26 '14 at 15:53
It will be faster because all instances of your "class" will share the same memory. – Dieterg Feb 26 '14 at 15:55
@inf3rno, I assume then in the main myClass function I can declare variables that can be referenced in all prototypes? I can just call them by var name in the prototypes correct? – seroth Feb 26 '14 at 15:56
Yes, if you use the `this` keyword prefix. `this.myVariable = "public";` and `var anotherVariable = "private";` – Dieterg Feb 26 '14 at 16:00
If you want to read more about Prototyping in JS I suggest you to read this [article by mozzila](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain). – Dieterg Feb 26 '14 at 16:02
Thank you. I know I have a long road to go but I'm off to a decent start. – seroth Feb 26 '14 at 16:03
That's not the simplest concept to get your head round, but I can see it's worth it. Thanks for my "something new" today :) – Reinstate Monica Cellio Feb 26 '14 at 16:04
I don't think this is the best way of learning oop. I mean there are base concepts like SOLID principles, design patterns or TDD which you can of course learn from experience, but that can take many years. Learning them from a book for example [Clean Code](http://www.amazon.com/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882) is a lot faster... I intend to write books in this topic, but first I need to learn how to write English. It is a really hard task... ;-) – inf3rno Feb 26 '14 at 22:31

joelrobichaud · Answer 2 · 2014-02-26T15:51:21.103

The this context inside your anonymous callback function is different from the one inside the methods of your class. Therefore, you need to keep a reference to your context inside a closure :

var that = this;
$('#a').load('file.asp',function(response,status,xhr){
    switch(status){
        case "success":
            //THIS IS WHERE THE QUESTION LIES
            that.otherfuntcion();
        break;
    }
});

An alternative would be to bind a specific context to your anonymous function :

$('#a').load('file.asp',function(response,status,xhr){
    switch(status){
        case "success":
            //THIS IS WHERE THE QUESTION LIES
            this.otherfuntcion();
        break;
    }
}.bind(this));

We usually call a `bind` to change the scope in these cases, using `that`, `self`, etc... is not recommended for a very long time. — inf3rno, Feb 26 '14 at 15:50

score 0 · Answer 3 · answered Feb 26 '14 at 15:46

You should copy the outer function context into the new variable to refer directly to the outer context. this in the inner function is a context of this inner function.

var self = this;
$('#a').load('file.asp',function(response,status,xhr){
    switch(status){
        case "success":
            //THIS IS WHERE THE QUESTION LIES
            self.otherfuntcion();
        break;
    }
}

JavaScript OOP reference approach

3 Answers3