javascript - 关于js的this问题

Question

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

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

这两个输出怎么解释？

Answer 1

foo.bar 本身是个函数的引用，指向的是

javascriptfunction() {
    var x = 30;
    console.log(this.x);
}

这个函数。这个函数中的this指向谁，关键是要看这个函数调用时的作用域在哪里。

1. foo.bar()
   这种调用方式是在foo对象下调用，所以bar方法中的this，应该指向foo对象本身，即foo.x，所以其内部的console.log(this.x)输出的是20。
   但需要注意的时，它本身并没有定义返回值，所以返回的是undefined。因此在外部console.log(foo.bar());时第二个输出的是undefined。

2. (foo.bar)()

不知道楼主了不了解js中(function(){})();这样的写法。它将一个函数声明变成了一个函数表达式，并能直接调用。所以foo.bar()跟(foo.bar)()，是一样的，输出也都是20和undefined。

P.S.
但如果
var a = foo.bar;
console.log(a();)
这个时候输出的应该是10和undefined。
因为这个时候调用这个函数的变量是a，作用域是全局作用域，在浏览器中，this这时即指向 window。所以内部的console.log(this.x)应该输出10。

Answer 2

推荐你看一篇文章http://segmentfault.com/a/1190000002640298

对于console.log(foo.bar());首先调用了对象foo的bar方法，这里的this代表了foo本身，所以在函数里面输出this.x的时候值为20;而这个函数没有返回值，默认返回undefined，因此console.log(foo.bar());的结果为undefined。
对于console.log((foo.bar)());首先foo.bar外面的()是分组运算符，会强制其内部的代码作为表达式运算，而且它只作用于表达式运算，不能作用于语句。因此这里的(foo.bar)是表达式，而不是代码块，可以理解成函数表达式，在后面加一个括号就是调用了这个函数，接下来和上面就是一样的。

Answer 3

你这是问this的问题还是问JS语句的问题。

1.this问题：bar函数在foo对象里是一个方法，当一个函数作为一个方法被调用的时候，this指向调用这个方法的对象。foo.bar(),这里foo调用了这个方法，那就是指向foo了。

2.语句问题：foo.bar() 与 (foo.bar)() 是一样的 o(╯□╰)o

Answer 4

http://yanhaijing.com/es5/#155 this 关键字