javascript - 除了第一题的值是20好理解，剩下的不好理解？

Question

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

Answer 1

这题考的主要知识点是同名变量覆盖和上下文this的问题。

(foo.bar)()这个是取得表达式foo.bar的值，然后执行它，和foo.bar()是一样的。

(foo.bar = foo.bar)()这个就有意思了，它是把foo.bar赋给foo.bar，感觉好像啥都没做是不是？但就是因为这个赋值语句，让bar方法脱离了它原本的上下文foo，变成了一个全局函数。因为JS中赋值语句是有副作用的，除了赋值，还会把这个值返回。
实际上这句代码相当于：

var temp = (foo.bar = foo.bar);
temp();

这时候的temp指向foo.bar，但此时的this却不再是foo，而是全局对象（window）。因为全局变量相当于window的属性，所以返回的是全局变量x的值10。

(foo.bar, foo.bar)()这个同理，逗号运算符会依次执行每个子表达式，并返回最右的那个子表达式的值。

Answer 2

在 bar 中 console.log（this）， 查看this 指向的是哪