Methoden in JavaScript verketten

Question

Ich bin neu in ES6 und Javascript, und ich kann nicht herausfinden, was falsch ist, diese dump() -Methode im folgenden Stück Code zu verketten.

Es gibt "main.js: 25 Uncaught Typeerror: kann Eigenschaft 'Dump' undefinierter lesen":

class TaskCollection { 

constructor(tasks = []) { 
    this.tasks = tasks; 
} 

addTasks(newTasks = []) { 
    this.tasks = this.tasks.concat(newTasks); 
} 

dump() { 
    console.log(this.tasks); 
} 

} 

let myTasks = new TaskCollection([ 
     'Do stuff' 
]); 

myTasks.addTasks([ 
    'New Task' 
]).dump(); 

Nun, wenn ich nicht Kette, die Dump() -Methode, alles funktionieren würde, Alles gut.

myTasks.addTasks([ 
'New Task' 
]); 

myTasks.dump(); 

Answer 1

Die Methode addTasks gibt keinen Verweis auf das Objekt zurück. Wenn Sie arbeiten wollen Chaining, braucht Ihre Methode wie folgt aussehen:

addTasks(newTasks = []) { 
    this.tasks = this.tasks.concat(newTasks); 

    return this; 
} 

Answer 2

Um Methode Verkettung zu verwenden, müssen Sie this aus der früheren Methode zurückzukehren. In Ihrem Fall, kehren Sie nicht this von addTasks, so das Ergebnis addTasks des Aufrufs ist undefined, und Sie können Methoden nicht rufen undefined.

So fügen Sie einfach

return this; 

... zu einem Methode, von der Sie verketten möchten.

Methodenverkettung ist nicht etwas besonderes. Wenn Sie das tun:

addTasks(/*...*/).dump(); 

, was Sie tun effektiv ist:

var x = addTasks(/*...*/); 
x.dump(); 

... nur ohne die Variable. Abhängig davon, wie addTasks geschrieben wird, rufen Sie möglicherweise dump für dasselbe Objekt (Methodenverkettung) oder für ein anderes Objekt vollständig auf (wenn addTasks etwas anderes als this zurückgegeben hat).

Answer 3

You should return this in *addTasks* method 

class TaskCollection { 
 
     
 
     constructor(tasks = []) { 
 
      this.tasks = tasks; 
 
     } 
 
     
 
     addTasks(newTasks = []) { 
 
      this.tasks = this.tasks.concat(newTasks); 
 
      return this; 
 
     } 
 
     
 
     dump() { 
 
      console.log(this.tasks); 
 
     } 
 
     
 
     } 
 
     
 
     let myTasks = new TaskCollection([ 
 
       'Do stuff' 
 
     ]); 
 
     
 
     myTasks.addTasks([ 
 
      'New Task' 
 
     ]).dump();