了解 Javascript 中的方法链接

Understanding Methods Chaining in Javascript

我是 ES6 和 Javascript 的新手,我无法弄清楚在以下代码段中链接此 dump() 方法有什么问题。

它 returns “main.js:25 未捕获的类型错误:无法读取未定义的 属性 'dump'”:

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

现在,如果我不链接那个 dump() 方法,一切都会正常工作。

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

myTasks.dump();

为了使用方法链接,您需要 return this 来自之前的方法。在你的情况下,你没有从 addTasks return this,所以调用 addTasks 的结果是 undefined,你不能调用方法undefined.

所以只需添加

return this;

...到您希望能够链接的任何方法。

方法链接不是什么特别的东西。当你这样做时:

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

你所做的是有效的:

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

...只是没有变量。根据 addTasks 的编写方式,您可能会在同一对象(方法链接)或完全在其他某个对象上调用 dump(如果 addTasks returned 不是this).

方法 addTasks 没有返回对象的引用。如果您希望链接起作用,您的方法需要如下所示:

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

    return this;
}
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();