Change value object Javascript

Question

I have a normal object in javascript, contenting functions and values.

This is my example object:

var MyObject = {
    myData: 1,
    a: function() {},
    b: function() {}   
}

Now in the function a there is some logic that fire on it, but it should change even the value of myData property.

But when i try get it from the method b, that value come as an undefined value, instead of the value changed.

I created a JsFiddle with a small example of the behaviour of the my object. I realized that it how Javascript behave, but I didn't understand why.

`this` reference is not carried over into your event handlers. You need to assign it to another variable outside the handlers and access it through the closure, `var self = this;`. — Keen, Jun 03 '14 at 18:35

score 2 · Accepted Answer · answered Jun 03 '14 at 18:36

2

The issue is because this within the click handlers refers to the element which was clicked, not the object the handler functions are members of. You need to cache this:

a: function () {
    var self = this;
    $('.setValue').click(function() {
        self.myData = 2;
    });
},
b: function () {
    var self = this;
    $('.getValue').click(function() {
        alert(self.myData);
    });
}

Updated fiddle

answered Jun 03 '14 at 18:36

Rory McCrossan

319,460
37
290
318

Thanks so much, all clear! :) :) – Fabrizio Fenoglio Jun 03 '14 at 18:37
@Fabrizio no problem, glad to help – Rory McCrossan Jun 03 '14 at 18:38
Thanks :) just waiting a couples of minutes to accept the answer :) – Fabrizio Fenoglio Jun 03 '14 at 18:40

advncd · Answer 2 · 2014-06-03T19:00:10.690

0

In JavaScript, each function has its own this argument. In your case, you want to access the outer function's this variable so you should do something like this:

var that = this;

Here is the updated jsfiddle: http://jsfiddle.net/xaaLQ/5/

edited Jun 03 '14 at 19:00

answered Jun 03 '14 at 18:41

advncd

3,429
1
24
27

Change value object Javascript

2 Answers2