Question

Hi I'm new to javascript. I have one object ListModel and I am trying to access the addToModel method from a second object.

function ListModel(){
    this.list = {};
}

ListModel.prototype.addToModel = function(s){
    var items = s.split("\n");
    for( var i =0; i<items.length-1; i++){
       console.log(items[i] + "\n");
    }

}

After extensive searching I have been unable to find a solution to this problem.

The second object is:

function ListMaker(){
    this.model = new ListModel();
}

ListMaker.prototype.read = function(e){
   var f = e.target.files[0]; 

   if (f) {
      var r = new FileReader();
      r.onload = function(e) { 
        var contents = e.target.result;
        this.model.addToModel(contents);
        document.getElementById("ta").innerHTML = contents;
     }
       r.readAsText(f);
     } else { 
        alert("Failed to load file");
    }
}

In the read method I call: this.model.addToModel(contents); and the console returns Cannot read property 'addToModel' of undefined If I change the line to: this.model = new ListModel().addToModel(contents); then the method works as excpected.

Maybe I'm going about this the wrong way. Any help would be appreciated.

Answer 1

The problem is this

http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this/

Once you call a function, this is no longer pointing to what you think it is.

You need to stash this in a local and then reference the local in your callback.

ListMaker.prototype.read = function(e){
   var f = e.target.files[0]; 
   var _this = this;
   if (f) {
      var r = new FileReader();
      r.onload = function(e) { 
        var contents = e.target.result;
        _this.model.addToModel(contents);
        document.getElementById("ta").innerHTML = contents;
     }
       r.readAsText(f);
     } else { 
        alert("Failed to load file");
    }
}

See it in action: http://codepen.io/anon/pen/eZrYQj

How to access a method in one object from a second object

1 个答案: