How to access object property from inside class fu

Question

one of my classes in Javascript needs to be "updated" with Json sometimes. I have always done a function, that updates the array of data, given an id, but now i wanted to do it more encapsulated (Function update, inside the class).

What i made:

function File(data){
        this.data = data;

        this.update = function (callback){
            var set = function(ajaxData){
                this.data = ajaxData.PcbFile;
            }
            getPcbFile(data.id, function(ajaxData){
                set(ajaxData);
                callback();
            });
        };
    }

But, this.data = ajaxData.PcbFile; doesen't work... My object still with the last data set, and not the updated one. The function SET, i created as another attempt to set the data.

There is no problem on the ajax, since i debuged the ajaxData, and it's ok (when i update).

So, how do i really access the object property data from an inside function?

(sorry for my english...)

Answer 1

I learned this the hard way, you have to be careful with this. It always refers to the this in the current scope, not it's containing object. Whenever you wrap something in function() { ... }, this becomes of a different scope. In your case, duplicate the object to a local variable and manipulate it's .data property.

function File(data){
    this.data = data;
    var file = this; //call the variable whatever you want
    this.update = function (callback){
        var set = function(ajaxData){
            file.data = ajaxData.PcbFile;
        }
        getPcbFile(data.id, function(ajaxData){
            set(ajaxData);
            callback();
        });
    };
}

Answer 2

Try this:

function File(data){
    this.data = data;

    var self = this;

    this.update = function (callback){
        var set = function(ajaxData){
            self.data = ajaxData.PcbFile;
        }
        getPcbFile(data.id, function(ajaxData){
            set(ajaxData);
            callback();
        });
    };
}

The value of this within a function depends on how that function is called. E.g., when you use the "dot" notation, someObj.someMethod() then within someMethod() you'd have this set to someObj. You can explicitly set this to some other object using the .apply() or .call() methods. Otherwise if you call a function as with set(ajaxData) then this will be the global object (window).

By keeping a reference to this outside your function (I prefer the variable name self for this purpose) you can reference it inside your function.

Answer 3

Cache this so you can refer to it in the same context some place else:

function File(data){

  var self = this;

  self.data = data;

  self.update = function (callback){
    var set = function(ajaxData){
      self.data = ajaxData.PcbFile;
    }
    getPcbFile(data.id, function(ajaxData){
      set(ajaxData);
      callback();
    });
  };
}

Answer 4

 (function(){
   var accessible = {
     prop1: 'blabla',
     verify: function(){
       console.log( this.prop1);
       return this;
     },
     deepAccess: function(){
       return function(){
         accessible.prop1 = 'bloblo';
         return function(){
           console.log("Deep access ", accessible.prop1);
         }
       }
     },
     insideFunction: function(){
       //here you can use both 'this' or 'accessible' 
                  this.prop1 = 'bleble';
                  return this;
       },
       prop2: 3.1415
    };
   return accessible;
})().verify().insideFunction().verify().deepAccess()()();

/* console shows:
 blabla
 bleble
 Deep access bloblo
*/