Referring to this in a loop?

Question

p._initEvents = function() {

    $(window).on('drop', this.onDrop.bind(this)).on('dragover', this.onDragOver);

};


p.onDrop = function(e) {

    e.preventDefault();

    var files = e.originalEvent.dataTransfer.files;
    $.each(files, function(index, file){
        this.showTemplate();
    });

};

p.showTemplate = function() {

    console.log('show template');
};

I'm trying to run this.showTemplate() but the error says it's undefined, I believe it's to do with binding this.

I have bound this for the onDrop method, but I'm not sure the best way to access this inside a loop?

If you want to access each file why don't you just use `file`? Or are you expecting `this` to represent something else? — Liam, Jun 02 '14 at 16:21
He doesn't want to access each file, he wants to access the target of the event. — Barmar, Jun 02 '14 at 16:22
I just want to show a template for each file that was dropped. — panthro, Jun 02 '14 at 16:23
If `files` is an Array, then do this: `files.forEach(this.showTemplate, this);`. It'll pass each `file` as the first argument, which I assume will be needed. — cookie monster, Jun 02 '14 at 16:30

score 4 · Accepted Answer · answered Jun 02 '14 at 16:22

4

one thing you can do is outside of the $.each() function declare a this variable...

p.onDrop = function(e) {

    e.preventDefault();

    var myThis = this;

    var files = e.originalEvent.dataTransfer.files;
    $.each(files, function(index, file){
        myThis.showTemplate();
    });

};

answered Jun 02 '14 at 16:22

Adjit

9,403
8
45
86

Is this sometimes called 'that' or 'self'? I think I've seen this elsewhere. – panthro Jun 02 '14 at 16:23
@panthro really just depends on what you want to call the variable. Some people use `self` or `that`. Its just one way that you can keep `this` throughout the function – Adjit Jun 02 '14 at 16:25
What;s the difference between this example and binding thats in my example? – panthro Jun 02 '14 at 16:27
`self` is usually used when it's in a class definition, because that's a common term in OO programming. – Barmar Jun 02 '14 at 16:27
@panthro The difference is that `$.each()` binds `this` to the current element of the iteration, and that shadows the binding from `bind()`. – Barmar Jun 02 '14 at 16:28
@panthro: That binding is only to the `.onDrop` function. You'd need to create a separate binding for `.showTemplate()` if you wanted to take that approach. `$.each(files, this.showTemplate.bind(this));` – cookie monster Jun 02 '14 at 16:34
I'm having some trouble with $(window).on('drop', this.onDrop); When I remove the bind, var that = this; no longer works, is the bind necessary or am I doing something else wrong? – panthro Jun 02 '14 at 16:39
@panthro: then you're really not getting it. You need to stop and learn how `this` works in JavaScript. – cookie monster Jun 02 '14 at 16:40
@panthro don't know the context so I can't help you with that. If you need more help ask another question with all the details and code. – Adjit Jun 02 '14 at 16:40
@cookiemonster could you point me to a good tutorial on this? – panthro Jun 02 '14 at 16:42
@panthro: [This answer](http://stackoverflow.com/a/134149/3096782) seems to do a decent job explaining it, though it's old and so it doesn't cover `.bind()`. Just keep in mind that when you pass `this.foo` to as an argument (or when assigning it to a variable), you're only passing/assigning the function itself. The `this` object doesn't come along with it. So that answer's *"As a function"* description would apply there. – cookie monster Jun 02 '14 at 17:01

Referring to this in a loop?

1 Answers1