Using jQuery on Object Oriented Javascript files

Question

I'm creating the script files for my Project using Object Orientation and I also use frameworks/widgets like jQuery and Datatables.

The public properties I create on my class, are not accessible from the inner scope of functions that are executed from jQuery code.

Here is a sample:

    function MyClass() {
        this.MyProperty = '';
    }

    MyClass.prototype.initialize = function() {
            $(document).ready(function(){
            alert(this.MyProperty); // MyProperty is undefined at this point
        }
    };

How can I fix this? Is this the correct way to have a property that can be accessed from every member of a class?

What do you want to achieve with all that?

gdoron
– gdoron

2012-11-04 01:55:00 +00:00
Commented Nov 4, 2012 at 1:55 — gdoron
– gdoron, Commented Nov 4, 2012 at 1:55

zb' · Accepted Answer · 2012-11-04 02:00:01Z

4

store this :

 function MyClass() {
        this.MyProperty = '';
    }

    MyClass.prototype.initialize = function() {
            var that=this;
            $(document).ready(function(){
            // in event handler regardless of jquery this points 
            // on element which fire event. here this === document,
            alert(that.MyProperty); // MyProperty is defined at this point
        }
    };

edited Nov 4, 2012 at 2:00

answered Nov 4, 2012 at 1:53

zb'

8,0793 gold badges44 silver badges68 bronze badges

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

Comments

MarioDS · Accepted Answer · 2012-11-04 01:55:58Z

0

That is because this does not point to your class but to the document in that function. You need to store what it points to, when it points to your class:

function MyClass() {
    this.MyProperty = '';
}

MyClass.prototype.initialize = function() {
    var myClassInstance=this;
    $(document).ready(function(){
        alert(myClassInstance.MyProperty); // Will contain the property
    });
}

answered Nov 4, 2012 at 1:55

MarioDS

13.1k15 gold badges70 silver badges123 bronze badges

Comments

user400654 · Accepted Answer · 2012-11-04 01:59:26Z

0

$.proxy can help with this,

function MyClass() {
    this.MyProperty = '';
}

MyClass.prototype.initialize = function() {
    $(document).ready($.proxy(function(){
        alert(this.MyProperty);
    },this));
};

answered Nov 4, 2012 at 1:59

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Comments

Stephen · Accepted Answer · 2012-11-04 02:14:41Z

0

This is a little different from the others, but a little easier to work with. Keeps the logic of assigning the "this" context outside of the initialize() function itself. Your unique case could nullify this solution from being viable, but thought I'd share anyway.

function MyClass() {
   this.MyProperty = '';
   $(function(){
      this.initialize();
   }.call(this));
}

MyClass.prototype.initialize = function () {
   alert(this.MyProperty);
}

answered Nov 4, 2012 at 2:14

Stephen

5,7501 gold badge27 silver badges33 bronze badges

Collectives™ on Stack Overflow

Using jQuery on Object Oriented Javascript files

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related