jQuery set scope of method

Question

I just wondered if something like this can be achieved:

Assume that I have a event callback inside my library defined:

var app = {
        globals: {
            foo: null
        },
        bar: function(e) {
            e.preventDefault();
            e.stopPropagation();
            if (typeof app.globals.foo === "function") app.globals.foo(e);
        },
        init: function(options) {
            $.extend(app.globals, options);
            $(".myclass").on("click", function(e) {
                app.bar(e);
            });
        }
    };

    $(document).ready(function() {
        app.init({
            foo: function(evt) {
                alert("clicked");
                console.log(evt.target);
            }
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myclass">Click Me!</div>

With this method, I'm passing the ".myclass" elements' click event data to app.foo, so the object oriented method would be executed.

TL;DR: The question is, can I set the scope of foo as the object which sent the click event? So:

app.init({
   foo: function(){
       console.log(this);
   }
});

would be executed same as:

app.init({
   foo: function(evt){
       console.log(evt.target);
   }
});

Is something like this possible?

Yes it basically works. The code that I wrote is not tested, just written out of my head to give you an idea what I mean. — Taha Paksu
– Taha Paksu, Commented Aug 9, 2016 at 21:15
Then please make sure you post valid code and not scribbles. This code is broken and it's pointless to discuss it. — Amit
– Amit, Commented Aug 9, 2016 at 21:16

Amit · Accepted Answer · 2016-08-09 21:23:03Z

1

You can control the this value for the foo function on activation:

// ...
if(typeof app.globals.foo === "function") app.globals.foo.call(e.target);
// ...

Will set the this to be equal to e.target and you'll get the behavior you described, however...

It's not a good practice to do so. First, if foo is bound to a specific this (for example via foo.bind(someContext) this method will fail to override that context. Second, it's unnatural to have a this context when there's no real object context - that's what function arguments are used for. The "common exception" to this (often found in jQuery callbacks) is passing the context to an "isolated" callback function, not an "object method", and even then it's hard to justify this because of the same reason, function arguments are much clearer and less fragile.

answered Aug 9, 2016 at 21:23

Amit

46.5k9 gold badges84 silver badges114 bronze badges

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

2 Comments

Taha Paksu Over a year ago

So the .call(e.target) is defining the scope there right? I basically wanted a bridge between a click callback and a click object method, so I can carry the whole click event callback to that object method safely. For example, someone has a method full of $(this) (I know, should've buffered - bad practice), and he/she wants to copy that method directly to a library. That would be useful.

Amit Over a year ago

@TahaPaksu - that would usually work, I just think it's ill advised.

Collectives™ on Stack Overflow

jQuery set scope of method

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