Calling a function from another function within the same prototype and context of this

Question

In attempting to keep with the DRY principle, I decided to revise a function's prototype in an effort to reduce the number of function.call() calls.

Following is a snippet of what I currently have and further clarification as to what I am attempting to do.

com.domain.$ = function(s){
     if(!this){return new com.domain.$(s);}

    this.selector = s;
    this.elements = document.querySelectorAll(s);
}

com.domain.$.prototype = (function(){
    function exe(f){
        var e = this.elements,
            el = e.length;
        for(var i=0; i<el; i++){
            f(e[i]);
        }
    }

    function addClass(c){exe.call(this,function(el){el.classList.add(c);});}
    function removeClass(c){exe.call(this,function(el){el.classList.remove(c);});}
    function toggleClass(c){exe.call(this,function(el){el.classList.toggle(c);});}

    return {
        addClass:addClass,
        removeClass:removeClass,
        toggleClass:toggleClass
    }
}());

I realize this looks very much like I am attempting to mimic the functionality of jQuery. While intentional, this is not meant to act as a replacement but rather a better personal understanding of JavaScript.

That said, what I would like to do is remove the need to invoke exe() via exe.call(this[, fnc]); in order for the context of this to be what I want. I believe I can do this through function binding (.bind()), though perhaps not the way I would like to. I understand it is possible to instead do something like:

com.domain.$.prototype.exe = function(){}

and call it like:

function addClass(c){this.exe(function(){});}

In doing so, however, I lose the private visibility of exe() provided by the closure in my original code. I would like to keep that in tact, if possible.

My question, then, is whether or not it is possible to bind exe() within my original code in such a way that I can reduce the redundant use of exe.call(this, possess the correct context for this within exe(), and maintain the private visibility within the closure?

If this seems a poor implementation of what I am trying to accomplish, I am more than happy to consider other options.

Thank you in advance.

Felix Kling · Accepted Answer · 2012-08-24 18:02:04Z

1

No, you can't, since at the moment you define exe(), the instance you want to call exe() on does not exist yet.

In fact, if you are going to make several calls to com.domain.$, you will use exe() with different instances and therefore it does not make sense to bind exe() to a specific instance.

If you wanted to do that, you'd have to define all these methods inside the constructor and you would loose all the advantages of prototypes:

(function() {
    function exe(f){
        // ...
    }

    com.domain.$ = function(s){
        // ...

        var exe_ = exe.bind(this);
        this.addClass = function(c) {
             exe_(function(el){el.classList.add(c);});
        };
        // ...
    };
}());

I would suggest, if you don't want to use .call, to just modify exe() so that it accepts an array of elements as argument and pass this.elements to it from the prototype functions. I don't see why exe() needs to use this at all. It's merely a helper which passes each element of an array to a given function and by making it more general, it is easier to reuse.
For example:

var com.domain.$ = (function(o) {
    function exe(arr, f){
        var el = e.length;
        for(var i=0; i<el; i++){
            f(arr[i]);
        }
    }

    var $ = function(s){
         // ...
    }

    $.prototype.addClass = function(c){
        exe(this.elements, function(el){
            el.classList.add(c);
        });
    };
    // ... 

    return $;
}());

edited Aug 24, 2012 at 18:02

answered Aug 24, 2012 at 17:30

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

2 Comments

AustinP Over a year ago

Thanks for the response, Felix. As you noticed, I want to keep the functionality out of the definition of the constructor for obvious reasons. As you also noted, I could pass this.elements to exe(), and I did consider this, but I was hoping to avoid redundantly using exe(this.elements, ... and keep the script file smaller.

Felix Kling Over a year ago

Some things are just not possible :) You should rather focus on readability and maintainability and use a code minifier to reduce the file size.

Collectives™ on Stack Overflow

Calling a function from another function within the same prototype and context of this

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related