JavaScript中x的两个不同取值：为何go()与foo.baz.bar()结果不同？

先把你的代码贴出来方便分析：

var x = 3;
var foo = {
  x: 2,
  baz: {
    x: 1,
    bar: function() {
      return this.x;
    }
  }
}
var go = foo.baz.bar;
alert(go());
alert(foo.baz.bar());

其实核心原因在于JavaScript里this的绑定规则——this的值是在函数调用的时候确定的，而不是函数定义的时候！咱们一步步拆解：

1. 关于alert(go())：

   • 你把foo.baz.bar这个函数的引用赋值给了全局变量go，此时go就成了全局作用域下的独立函数，和原来的baz对象没有绑定关系了。
   • 当直接调用go()时，属于默认绑定场景：非严格模式下，独立调用的函数，this会自动绑定到全局对象（浏览器环境里就是window）。
   • 全局作用域中定义的x是3，所以这个调用返回3，第一个alert弹出3。

2. 关于alert(foo.baz.bar())：

   • 这里是通过foo.baz这个对象来调用bar方法的，属于隐式绑定场景：当函数作为对象的方法被调用时，this会绑定到调用这个方法的对象，也就是foo.baz。
   • foo.baz内部定义的x是1，所以这个调用返回1，第二个alert弹出1。

简单说：虽然go和foo.baz.bar指向的是同一个函数，但调用它们的上下文（也就是this绑定的对象）完全不同，所以返回的结果自然不一样啦。

内容的提问来源于stack exchange，提问作者Lionel Yang