Avoiding repetition on javascript prototype definitions - context issue

Question

I have some javascript code which looks like this - it's very repetitive, and as you can see follows a very defined pattern:

var AttachmentBuilder = function(){
    this.attachment = {};
}
AttachmentBuilder.prototype.text = function(value){
    this.attachment.text = value;
    return this;
}
AttachmentBuilder.prototype.fallback = function(value){
    this.attachment.fallback = value;
    return this;
}
 AttachmentBuilder.prototype.color = function(value){
    this.attachment.color = value;
    return this;
}

I had the idea to refactor this like:

var AttachmentBuilder = function(){
    this.attachment = {};
}
passThrough(AttachmentBuilder.prototype,"attachment","text");
passThrough(AttachmentBuilder.prototype,"attachment","fallback");
passThrough(AttachmentBuilder.prototype,"attachment","color");

function passThrough(obj, apply, name){
    obj[name] = function(param){
        this[apply][name] = param;
    }
    return this;
 }

But the context of this is not correct, and it does not behave like the long-hand version.

Below is a working example demoing the working and not working versions.

var AttachmentBuilder_Original = function(){
    this.attachment = {};
}
AttachmentBuilder_Original.prototype.text = function(value){
    this.attachment.text = value;
    return this;
}
AttachmentBuilder_Original.prototype.fallback = function(value){
    this.attachment.fallback = value;
    return this;
}
 AttachmentBuilder_Original.prototype.color = function(value){
    this.attachment.color = value;
    return this;
}

var original = new AttachmentBuilder_Original();
original.text("Text").color("Red").fallback("Fallback");
console.log("original",original.attachment);

/* ------------------------------------- */

var AttachmentBuilder_New = function(){
    this.attachment = {};
}
passThrough(AttachmentBuilder_New.prototype,"attachment","text");
passThrough(AttachmentBuilder_New.prototype,"attachment","fallback");
passThrough(AttachmentBuilder_New.prototype,"attachment","color");

function passThrough(obj, apply, name){
    obj[name] = function(param){
        this[apply][name] = param;
    }
    return this;
}

var adjusted = new AttachmentBuilder_New();
adjusted.text("Text").color("Red").fallback("Fallback");
console.log("adjusted",adjusted.attachment);

I'm also interested if there is a more ES6-like way of solving this same issue of repetition.

It is high time to code in es6 and use a transpiler+bundler for es5 support. Can save you from these hurdles and focus on business logic. Just a suggestion. — sabithpocker
– sabithpocker, Commented Apr 28, 2017 at 10:27

Bergi · Accepted Answer · 2017-04-28 10:32:35Z

2

Your higher order function looks good. Probably simple mistake of putting return statement in the wrong place.

function passThrough(obj, apply, name){
    obj[name] = function(param){
        this[apply][name] = param;
        return this;
    } //^^^^^^^^^^^^
}

edited Apr 28, 2017 at 10:32

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

answered Apr 28, 2017 at 10:24

sabithpocker

15.6k1 gold badge44 silver badges77 bronze badges

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

4 Comments

Jamiec Over a year ago

Thank you for calling me a n00b. Ive only been writing javascript for 25 years! But indeed - I had my return this in the wrong place.

sabithpocker Over a year ago

Hmm its probably bad language use. Not that proficient in the language, this happens all the time. I meant simple mistake, sorry if that was bad.

Jamiec Over a year ago

S'ok. If you have a more ES6-like solution to this problem Im most interested. I am still stuck in old-fashioned JS thinking

sabithpocker Over a year ago

I don't think es6 has anything special related to chaining so I'll better take back my free opinion on this. If I find anything related to this pattern I'll update here.

Pankaj Shukla · Accepted Answer · 2017-04-28 10:34:19Z

0

Your solution should work, if you do this modification.

var AttachmentBuilder = function(){
        this.attachment = {};
    }
    passThrough(AttachmentBuilder.prototype,"attachment","text");
    passThrough(AttachmentBuilder.prototype,"attachment","fallback");
    passThrough(AttachmentBuilder.prototype,"attachment","color");

    function passThrough(obj, apply, name){
        obj[name] = function(param){
            this[apply][name] = param;
            return this;//<---move return this here
        }
        //return this;
     }

answered Apr 28, 2017 at 10:34

Pankaj Shukla

2,6722 gold badges13 silver badges18 bronze badges

Collectives™ on Stack Overflow

Avoiding repetition on javascript prototype definitions - context issue

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related