Javascriptでチェイニングする方法を理解する

Question

私はES6とJavascriptを使い慣れていないので、次のコードでこのdump（）メソッドを連鎖させることで何が問題なのか理解できません。

それは「main.js：25キャッチされない例外TypeError：未定義のプロパティ 『ダンプ』を読み込めません」：返す今、私は（）メソッドダンプチェーンいない場合

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(); 

を、すべてがうまくいきますちょうど良い。メソッドチェーンを使用するためには

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

myTasks.dump(); 

Answer 1

メソッドaddTasksはオブジェクトへの参照を返していません。あなたが動作するように、連鎖したい場合は、あなたの方法は、このように見える必要があります：

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

    return this; 
} 

Answer 2

、あなたが以前の方法からthisを返す必要があります。 addTasksを呼び出した結果がundefinedあるので、あなたのケースでは、あなたは、addTasksからthisを返しません、あなたはそうちょうど

return this; 

を追加...いずれにもundefined.

上のメソッドを呼び出すことはできません。メソッドをチェーン化できるようにする必要があります。

メソッド連鎖は特別なものではありません。あなたが行うとき：何をやっている

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

が効果的である：

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

...ちょうど変数なし。 addTasksの書き方によっては、同じオブジェクト（メソッド連鎖）または別のオブジェクト（addTasksがthis以外のものを返した場合）でdumpを呼び出している可能性があります。

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();