JS函数内部声明有函数时，不同调用方式的差异？

有点不理解下面两种不同调用方式为什么返回结果会有这样的差异？希望有人能帮忙解答一下，万分感谢。

function foo() {
  var x = 1;
  function bar() {
    console.log(x);
  }
  return bar;
}

var x = 2;
var f = foo();
f()； 
// 上面这种调用方式 返回的是 1

function foo() {
  var x = 1;
  function bar() {
    console.log(x);
  }
  return bar;
}

var x = 2;
foo();

// 这种方式返回的却是 function bar()。

js中函数本身也是一个对象，是可以传递的。
foo()只是返回bar这个函数对象，并不调用执行bar函数。

要调用执行bar函数除了你第一种方法，还可以
foo()();

第一种方式的时候，第一个x=2是全局变量，第二个x=1是局部变量，调用f() 等于是调用bar()。返回的自然是函数内部的x值。就是1.
这里面只要明白变量的作用域范围，就可以理解了。
第二种方式，就调用foo() ，当然返回的是函数。这里没有再次调用函数不可能返回值得。