Constructors and method chaining in JavaScript

Question

I am trying to make method chaining work in conjunction with my constructors, but I am not exactly sure how to go about it. Here is my code thus far:

function Points(one, two, three) {
this.one = one;
this.two = two;
this.three = three;
}

Points.prototype = {

add: function() {
    return this.result = this.one + this.two + this.three;
},
multiply: function() {
    return this.result * 30;
}

}

var some = new Points(1, 1, 1);
console.log(some.add().multiply());

I am trying to call the multiply method on the return value of the add method. I know there is something obvious that I am not doing, but I am just not sure what it is.

Any thoughts?

Sidharth Mudgal · Accepted Answer · 2012-11-18 04:58:18Z

13

You should not return the result of the expression. Instead return this.

Points.prototype = {

    add: function() {
        this.result = this.one + this.two + this.three;
        return this;
    },
    multiply: function() {
        this.result = this.result * 30;
        return this;
    }

}

And then use it like this: console.log(some.add().multiply().result);

edited Nov 18, 2012 at 4:58

Sidharth Mudgal

4,26422 silver badges25 bronze badges

answered Nov 18, 2012 at 4:53

BuddhiP

6,5035 gold badges39 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sethen Over a year ago

Ahh, of course, of course. Perfect, this is what I was looking for. I am wondering why there is the .result on the end of it. I know it returns the result property.. But, how?

BuddhiP Over a year ago

@Sethen: Well, its a good edit by Sidharth. at the end of .multiply() call, you return you Point instance, and .result property is resolved on that object, giving you the current value of the result property

Felix Kling Over a year ago

@Sethen: .multiply() returns this. So it's the same as accessing this.result or some.result. .add returns this as well, that's why you can call multiple on it, which is also a property of the object. It's the same thing.

Sethen Over a year ago

Ahh, that makes sense. It's just a property access expression basically. Perfect, thanks!

Collectives™ on Stack Overflow

Constructors and method chaining in JavaScript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related