Zugriff auf eine Methode in einem Objekt von einem zweiten Objekt aus

Question

Hallo, ich bin neu in Javascript. Ich habe ein Objekt ListModel und ich versuche, die AddToModel-Methode von einem zweiten Objekt zuzugreifen.

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"); 
    } 

}

Nach umfangreicher Suche habe ich nicht in der Lage gewesen, eine Lösung für dieses Problem zu finden.

Die zweite Aufgabe wird:

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"); 
    } 
} 

Im Leseverfahren I nennen: this.model.addToModel (Inhalt); und die Konsole gibt zurück Kann die Eigenschaft 'addToModel' von undefined nicht lesen Wenn ich die Zeile ändern zu: this.model = new ListModel(). AddToModel (contents); dann funktioniert die Methode wie erwartet.

Vielleicht gehe ich das in die falsche Richtung. Jede Hilfe wäre willkommen.

Answer 1

Das Problem ist diese

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

Sobald Sie eine Funktion aufrufen, diese nicht mehr zeigen, was Sie denken, es ist.

Sie müssen diese in einem lokalen speichern und dann das lokale in Ihrem Rückruf verweisen.

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"); 
    } 
} 

Sehen sie in Aktion: http://codepen.io/anon/pen/eZrYQj