What's the scope of an item in an JavaScript Array

Question

I'm playing around with scopes in JavaScript and I was curious about something I ran across when calling a function from an array. In the below example I work with three different scopes. One bound to an Object called foobar, one bound to window and then a third one which actually refers to the function itself. I'm just curious why the function is scoped to itself and not to the global window object. Is it because Array access is a function call itself so the stored function is in a local scope?

var foobar = {
  doWork: function() {
      console.log('doing some work...');
      console.log(this);
  }
}

foobar.doWork(); // `this` will refer to foobar

var doWorkClone = foobar.doWork;
doWorkClone(); // `this` will refer to window

var workClones = [];
workClones.push(foobar.doWork);
workClones[0](); // `this` will refer to the doWork function itself

Functions are never really "bound" to anything in JavaScript. The value of this is determined upon each function call based on the situation. — Pointy
– Pointy, Commented Aug 22, 2012 at 16:38
"this will refer to the doWork function itself" — No, it won't. Note the [ and ] in the output. It refers to workClones — Quentin
– Quentin, Commented Aug 22, 2012 at 16:39
@Humberto: Strictly speaking that's just a trick. The function that .bind returns calls the original function with a predefined this - but neither of the two functions have a this value bound, technically. — pimvdb
– pimvdb, Commented Aug 22, 2012 at 16:42
@Humberto oh yes, you're definitely correct about the behavior - really we're just being picky about the terminology :-) — Pointy
– Pointy, Commented Aug 22, 2012 at 16:48

pimvdb · Accepted Answer · 2012-08-22 17:03:52Z

4

They behave the same way. In a.b(), the function a.b is called with this set to a.

foobar.doWork();  // function is `foobar.doWork`, `this` is `foobar`
workClones[0]();  // function is `workClones[0]`, `this` is `workClones`

This is because the . and [] notation are functionally the same thing. It does not matter which one you use, nor does it matter whether you're dealing with an array or not.

edited Aug 22, 2012 at 17:03

answered Aug 22, 2012 at 16:39

pimvdb

155k80 gold badges313 silver badges357 bronze badges

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

Comments

pimvdb · Accepted Answer · 2012-08-22 16:53:20Z

0

to understand this, litteraly, it might be helpfull to see how the js works under the hood.

when you write f(args), js will execute f.call(this, args). Hence this always refers to where you call the function from.

In your case:

foobar.doWork()   --> foobar
doWorkClone()     --> window or wrapping expression
workClones[0]()   --> "0" is in workClones, so workClones

edited Aug 22, 2012 at 16:53

pimvdb

155k80 gold badges313 silver badges357 bronze badges

answered Aug 22, 2012 at 16:52

roselan

3,7651 gold badge23 silver badges20 bronze badges

3 Comments

pimvdb Over a year ago

The examples are correct but I don't fully agree with your this reasoning. Surely foobar.doWork.call(this) is different.

Esailija Over a year ago

f(args) is not like f.call(this, args) at all. Or were you referring to a special case? In general it's completely wrong.

roselan Over a year ago

Of course "this" is different when you type it down (as you overwrite the "this" passed by default). We can argue than "this" is actually the parent object, but I won't as your your explanation is already way more clear.

Collectives™ on Stack Overflow

What's the scope of an item in an JavaScript Array

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related