理解 Javascript 中的方法链答案

【问题标题】：Understanding Methods Chaining in Javascript理解 Javascript 中的方法链
【发布时间】：2016-07-14 07:53:25
【问题描述】：

我是 ES6 和 Javascript 的新手，我不知道在下面的代码中链接这个 dump() 方法有什么问题。

它返回“main.js:25 Uncaught TypeError: Cannot read property 'dump' of undefined”：

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

【问题讨论】：

您需要从您的addTasks() 方法中return this。否则返回undefined

标签： javascript chaining

【解决方案1】：

方法addTasks 没有返回对对象的引用。如果你想让链接起作用，你的方法需要如下所示：

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

    return this;
}

【讨论】：

【解决方案2】：

为了使用方法链，你需要从之前的方法返回this。在你的情况下，你不会从addTasks返回this，所以调用addTasks的结果是undefined，你不能调用undefined.上的方法

所以添加

return this;

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

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

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

你正在做的是有效的：

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

...只是没有变量。根据addTasks 的编写方式，您可能会在同一个对象（方法链）或完全其他对象上调用dump（如果addTasks 返回的不是this）。

【讨论】：

【解决方案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();

【讨论】：