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

Answer 1

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.