Question

Who can explain why result are [20, 20, 10, 10] in this code:

var x = 10;
var foo = {
  x: 20,
  bar: function () {
    var x = 30;
    return this.x;
  }
};

console.log(
  foo.bar(),
  (foo.bar)(),
  (foo.bar = foo.bar)(),
  (foo.bar, foo.bar)()
);

Links to specification are welcomed

Answer 1

Can’t point you at specification, but i can highly recommend reading Douglas Crockford’s “Javascript: The good parts”. This book will help you understand most of the weird but great features of JavaScript.

As of your question:

1. foo.bar(),
   this keyword in bar function is bound to foo object
2. (foo.bar)() is the same as above,

3. In javascript you can assign variables from right to left multiple times

   z = 3;
   x = (y = z);
   console.log(x); //3

functions are variables as anything else. So you are assigning the function foo.bar to foo.bar, but the parenthesis causes the assigned function to be returned, and then executed.

(foo.bar = foo.bar)(); 
//is the same as
var f = (foo.bar = foo.bar);
f(); 
//and this also the same as:
var f= foo.bar;
f();

The function returned from parenthesis is not bound to anything, so this will refer to global object, in case of browsers – to the window object.

4.. The clause (foo.bar, foo.bar)() is just alike:

a = (3, 4); //last value is returned, first just parsed.
//a contains 4

var f = (foo.bar, foo.bar); 
//f contains body of foo.bar function, 
f() // is executed  in the context of `global` object, eg. `window`. 

Please read about binding of functions in JavaScript.